/** Shopify CDN: Minification failed

Line 2974:9 Expected identifier but found "url("
Line 3529:17 Unexpected "("

**/
/* Color custom properties */

:root,
.color-background-1 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-1);
  --gradient-background: var(--gradient-base-background-1);
}

.color-background-2 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-2);
  --gradient-background: var(--gradient-base-background-2);
}

.color-inverse {
  --color-foreground: var(--color-base-background-1);
  --color-background: var(--color-base-text);
  --gradient-background: rgb(var(--color-base-text));
}

.color-accent-1 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-1);
  --gradient-background: var(--gradient-base-accent-1);
}

.color-accent-2 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-2);
  --gradient-background: var(--gradient-base-accent-2);
}

.color-foreground-outline-button {
  --color-foreground: var(--color-base-outline-button-labels);
}

.color-foreground-accent-1 {
  --color-foreground: var(--color-base-accent-1);
}

.color-foreground-accent-2 {
  --color-foreground: var(--color-base-accent-2);
}

:root,
.color-background-1 {
  --color-link: var(--color-base-outline-button-labels);
  --alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-link: var(--color-foreground);
  --alpha-link: 0.7;
}

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

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-background);
}

.button--secondary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --color-button: var(--color-background);
  --alpha-button-background: 1;
}

.color-background-2 .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
  --color-button: var(--color-background);
  --color-button-text: var(--color-foreground);
}

.color-inverse .button--secondary {
  --color-button: var(--color-background);
  --color-button-text: var(--color-foreground);
}

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

.color-background-2 .button--tertiary,
.color-inverse .button--tertiary,
.color-accent-1 .button--tertiary,
.color-accent-2 .button--tertiary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

:root,
.color-background-1 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-foreground);
  --alpha-badge-border: 0.1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-background);
  --alpha-badge-border: 1;
}

:root,
.color-background-1,
.color-background-2 {
  --color-card-hover: var(--color-base-text);
}

.color-inverse {
  --color-card-hover: var(--color-base-background-1);
}

.color-accent-1,
.color-accent-2 {
  --color-card-hover: var(--color-base-solid-button-labels);
}

:root,
.color-icon-text {
  --color-icon: rgb(var(--color-base-text));
}

.color-icon-accent-1 {
  --color-icon: rgb(var(--color-base-accent-1));
}

.color-icon-accent-2 {
  --color-icon: rgb(var(--color-base-accent-2));
}

.color-icon-outline-button {
  --color-icon: rgb(var(--color-base-outline-button-labels));
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

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

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

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

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

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

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

  .page-width-tablet {
    padding: 0 5rem;
  }
}

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

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

.isolate {
  position: relative;
  z-index: 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-top {
  margin-top: 5rem;
}

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

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.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: 1px;
  height: 1px;
  margin: -1px;
  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;
}

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

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

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

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

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

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

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

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

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: .16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.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 rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

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

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

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

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

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

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

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

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

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

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  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;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 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;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link:hover,
.customer a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) 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;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

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

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

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

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

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

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

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

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

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

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

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

/* 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 rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

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

.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 rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

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

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

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

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

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

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

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

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

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

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

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

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

.title-wrapper-with-link a {
  color: rgb(var(--color-link));
  margin-top: 0;
  flex-shrink: 0;
}

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

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

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

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

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

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

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

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

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

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

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

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

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

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

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

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

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

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

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }
}

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

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

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

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

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

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

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

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

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

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item  {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

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

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

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

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

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

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

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

.media--16-9 {
  padding-bottom: 56.25%;
}

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

.media.media--hover-effect > img + img {
  opacity: 0;
}

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

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button [role="button"],
.cart__dynamic-checkout-buttons [role='button'],
.cart__dynamic-checkout-buttons iframe {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.shopify-payment-button__button--branded {
  z-index: auto;
}

.cart__dynamic-checkout-buttons iframe {
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-base-text), var(--shadow-opacity));
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before,
.shopify-payment-button [role="button"]:before,
.cart__dynamic-checkout-buttons [role='button']:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button [role="button"]:focus-visible,
.shopify-payment-button__button--unbranded:focus,
.shopify-payment-button [role="button"]:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused),
.shopify-payment-button [role="button"]:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Button - other */

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

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

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading-overlay__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading-overlay__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground),.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),0 0 0.5rem 0.4rem rgba(var(--color-foreground),.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

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

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground),var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

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

/* Select */

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

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

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

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

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

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

.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;
}

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

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

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

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

/* Form global */

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

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

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

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

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

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

.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 {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

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

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button svg {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.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;
}

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

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 5;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

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

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

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

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

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

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* section-announcement-bar */
#shopify-section-announcement-bar {
  z-index: 4;
}

.announcement-bar {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
}

.announcement-bar__link {
  display: block;
  width: 100%;
  padding: 1rem 0;
  text-decoration: none;
}

.announcement-bar__link:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-card-hover), 0.06);
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__link .announcement-bar__message {
  padding: 0;
}

.announcement-bar__message {
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
}

/* section-header */
#shopify-section-header {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  transform: translateY(-100%);
}

.shopify-section-header-hidden.menu-open {
  transform: translateY(0);
}

#shopify-section-header.animate {
  transition: transform 0.15s ease-out;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
  z-index: 99;
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

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

@media screen and (min-width: 990px) {
  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    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 auto 1fr;
    column-gap: 2rem;
  }

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

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

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

.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: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  width: 100%;
}

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

  .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: 990px) {
  .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  justify-content: center !important;
}

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

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

.header__icon span {
  height: 100%;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

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

.header__icon--menu[aria-expanded="true"]::before {
  content: "";
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icon;
  justify-self: start;
}

/* .header:not(.header--has-menu) * > .header__search {
  display: none;
} */

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

/*   .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  } */
}

.no-js .predictive-search {
  display: none;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

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

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2) );
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2) );
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 47.8rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

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

.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);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@media screen and (min-width: 990px) {
  .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--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

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

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease,
    transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.header__submenu.list-menu {
  padding: 2.4rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2.4rem;
}

.header__submenu .header__submenu .header__menu-item {
  padding-left: 3.4rem;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

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

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset)
    var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius)
    rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

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

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role="button"]:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role="button"]:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

/* Custom CSS Dev Derrick --start */
  @font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "LEDLIGHT Regular";
   
         url('LEDLIGHT-2021.woff') format('woff'), /* Modern Browsers */
     url('LEDLIGHT-2021.woff2') format('woff2'), /* Modern Browsers */
         url('LEDLIGHT-2021.ttf') format('truetype'), /* Safari, Android, iOS */
    }

.custom-font span{

  font-family: 'NEON LED Light', sans-serif;
                                                
}
.header__heading-logo {
    max-width: 300px !important;
}
    
.header-text{
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: normal;
  color: #D2D2D2;
  font-size: 1.8044rem;
  letter-spacing: 5px;
}
.header-text sup{
  font-size: 1rem;
}
    
.header-section-2{
  
}
h2{
  text-transform: uppercase;
}
.custom-button{
    font-family: var(--font-mono);
    font-weight: 400;
    font-style: normal;
    color: #D2D2D2;
    letter-spacing: 5px;
    border: 1px #D2D2D2 solid;
    border-radius: 5px !important;
    --border-offset: none;
    background-color: #333333;
    font-size: 1.4456rem;
    line-height: 0.5;
    padding-top: 1rem;
    padding-bottom: 1.4rem;
    padding-left: 0.5rem;
    padding-right: 0rem;
    min-height: 100%;
    margin-left: 4%;
}
.custom-button:hover{
   --border-offset: none;
    color: #333333!important;
    background-color:#D2D2D2;
   border: 1px #333333 solid;
}
.custom-button:not([disabled]):hover:after{
   --border-offset: none;
}
.custom-button-section{
  margin-top: -3rem;
  width: 100%;
  padding: 0px 13%;
}    
#shopify-section-template--14841316540496__69033b8b-26f1-40a2-b928-dab76613d78b{
  position: relative; /* Initial position */
  transition: top 0.3s;
  width: 100%;
} 
.fixed-section {
    position: fixed !important;
    top: 15rem;
    z-index: 2;
    background-color: #333333;
    padding-bottom: 2rem;
}
.fixed-section .custom-button-section {
    margin-top: -8rem;
    width: 100%;
    padding-top:  6rem;
    padding-bottom: 2rem;
}
.scroll-space {
    height: 1500px; /* Large enough to ensure scrolling */
}
.custom-button-2{
   font-family: var(--font-mono);
   font-weight: 400;
   font-style: normal;
   font-size: 1.9169rem;
   color: 333333;
   letter-spacing: 5px;
   border-radius: 4px !important;
    --border-offset: none;
   border: 1px #333333 solid;
   padding: 0px;
   line-height: 1;
   background-color: transparent;
   min-height: 36px;
   width: 160px;
}
.custom-button-2:hover{
  --border-offset: none;
  --shadow-horizontal-offset:none !important;
    --shadow-vertical-offset:none !important;
    --shadow-blur-radius: 0 !important;
    --shadow-opacity: none !important;
    --shadow-visible: none !important;
    --border-opacity: none !important;
    border: 1px #D2D2D2 solid;
    color: #D2D2D2;
}
   
.product-card-wrapper{
  border: 1px solid #D2D2D2;
  border-radius: 5px;
  padding: 0.1rem;
  min-height: 37.5rem;
}
.product-card-wrapper .card__heading{
   font-family: var(--font-mono);
   font-weight: 600;
   font-style: normal;
  font-size: 1.25rem;
  color: #D2D2D2 !important;
}    
.product-card-wrapper .quick-add__submit {
    padding: 0.3rem;
    min-width: 32% !important;
    box-sizing: border-box;
    min-height: 100%;
    border-radius: 5px;
    color: #D2D2D2;
    border-color: #D2D2D2;
    width: auto;
    border: 1px solid;
    --border-offset: none !important;
   font-family: var(--font-mono);
   font-weight: 600;
   font-style: normal;
  font-size: 1.15rem;
  text-align: left;
  text-transform: uppercase;
}
.product-card-wrapper .quick-add__submit span{
   font-family: var(--font-mono);
   font-weight: 600;
   font-style: normal;
  font-size: 1.15rem;
  text-align: left;
  text-transform: uppercase;
}
.card-information>.price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5331rem;
   color: #D2D2D2 !important;
  text-align: right;
  margin-top: -0.5rem !important;
}
.product-card-wrapper .card__inner {
    margin-top: 0rem;
}
.product-card-wrapper .card__content{
  margin-top: -6rem !important;
  padding: 0 !important;
}
.product-card-wrapper .card__information{
  display: flex;
}    
.product-card-wrapper .card__heading {
    width: 100%;
}
.card__badge {
    align-self: flex-end !important;
    grid-row-start: 3 !important;
    display: none !important; 
}
.price--on-sale .price-item--regular{
   display: none !important; 
}
.product-card-wrapper .card__media .media img {
    height: 100%;
    object-fit: contain !important;
    object-position: center center;
    width: 100%;
    height: 70% !important;
    margin: 0.4rem 0;
}    
    
/* .button--secondary{
    background-image: url("Mask Group 12.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 60px;
    min-width: 235px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;

}
.collection .card__information{
  display: none;
}
.collection .card__media .media img {
   object-fit: contain;
    padding: 0;
}
.collection .card__content{
  padding: 0 !important;
}
.collection .quick-add{
  margin: 0 !important;
}
.collection .button--secondary{
     background-image: url("Mask Group 13.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 60px;
    min-width: 235px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    justify-content: left;
    padding-left: 20px;
    text-transform: uppercase;
   --color-button-text: var(--color-base-outline-button-labels) !important;
}
.button-arrow{
  margin-left: 90%;
  position: absolute;
}

.collection__view-all{
  margin-top: 50px;
}
.collection__view-all .button--secondary{
   justify-content: center;
}
.list-social__link {
    padding: 1.8rem !important;
}
.list-social__item .icon {
    height: 46px !important;
    width: 46px !important;
}
.list-social__item .icon-tiktok{
   height: 46px !important;
    width: 46px !important;
} */
/* .header__icons{
  display: none;
}
.header__icon--search{
  display: none;
} */
.section-template--14841316540496__video_UT9tP7-padding {
  
    display: none;
}
    
.video-header{
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: normal;
  font-size: 2.25rem;
  letter-spacing: 7px;
  color: #D2D2D2;
  padding-bottom: 20px;
  text-transform: lowercase;
  
}    
.deferred-media__poster-button {
    background-color: transparent !important;
    border: 0 !important;
}

    
.section-template--14841316540496__featured_collection_CrYLeK-padding .title-wrapper--no-top-margin > .title{
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 5.25rem;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: #D2D2D2;
}

    
.cart-notification{
  z-index: 2;
}   
/* Icon row — search/account/cart centered in a content-width container
   on the --thread-pitch panel surface (solid, non-violet), sitting on its
   own row below the primary .top-nav-thread (header is display:block). */
.header__icons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  margin: 0 auto 1.2rem;
  padding: 0.6rem 1.6rem;
  background-color: var(--thread-pitch);
}
.header-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
}
.header{
  display: block;
}
.content-for-layout{
  margin-top: 10em;
}
.hero-image{
    display: flex;
    justify-content: center;
    margin: 0 auto 10%;
    max-width: 950px;
}
.footer__content-bottom {
    border-top: none !important;
}
.imghome1 {
    width: 100%;
    padding: 0px 20%;
}
.imghome2 {
    width: 35%;
}
.badge {
    margin-right: 10px;
    margin-top: 10px;
}
.product-count__text{
  font-size: 1.4rem !important;
} 
.footer-block--newsletter {
    display: block !important;
    width: 100% !important; 
    text-align: center !important;
}
.newsletter-form__field-wrapper {
    max-width: 52rem !important;
}
.newsletter-form{
  margin: auto !important;
}    
.newsletter-form__field-wrapper .field__input{
  color: #000000 !important;
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-style: normal!important;
  font-size: 1.1669rem !important;
  background-color: #D2D2D2 !important;
  border: 1px #D2D2D2 solid;
  border-radius: 5px;
  padding: 2.2rem 1.5rem 0.8rem 2rem;
}

.newsletter-form__button {
    width: 100%;
    margin: 0;
    left: 4%;
    top: 2px !important;
    height: 100%;
    z-index: 2;
    border: 1px #D2D2D2 solid;
    border-radius: 5px;
    position: relative;
    padding: 1rem 8rem;
    height: 4.5rem !important;
    font-family: var(--font-mono) !important;
    font-weight: 400 !important;
    font-style: normal!important;
    font-size: 1.1669rem;
  
}
.newsletter-form__button:hover{
  border: 1px #333333solid;
  color: #333333;
}
.field__label, .customer .field label{
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-style: normal!important;
  font-size: 1.1669rem;
}

    
.list-social {
    padding-top: 30px;
    justify-content: center !important;
}
    
.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after{
  box-shadow: none !important;
}
.field__input, .select__select, .customer .field input, .customer select{
  color: #000 !important;
}
.field__label, .customer .field label{
  color: #000 !important;
}
.list-social__item .icon {
    height: 4.5831rem !important;
    width: 4.5831rem !important;
}
.footer__localization:empty+.footer__column--info {
    align-items: flex-start !important;
}
.copyright__content a{
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-style: normal!important;
  font-size: 0.9169rem;
  text-transform: uppercase;
  color: #D2D2D2;
}
.product.grid {
    margin-top: 12rem;
}
.page-top-padding{
  margin-top: 12rem;
}


/** Safari only start */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)  {

   .fixed-section{
       top: 20rem;
      z-index: 3; 
      padding-bottom: 0rem;
      padding-top: 0rem;
   }
  .fixed-section .custom-button-section {
      padding-top: 1rem;
      padding-bottom: 4rem;
    }
}
/** Safari only End */
    
/* Product Page color change     */
.product__description,.price__regular .price-item--regular,.shopify-payment-button__button--unbranded,.quantity__button,.quantity__input,.cart-drawer .cart__checkout-button{
   color: #D2D2D2 !important;
}
.button, .shopify-challenge__button, .customer button{
   color: #D2D2D2 !important;
}
/* The two #D2D2D2 overrides above also hit the cart checkout button, making its
   label invisible against a light button background. Restore the scheme's proper
   button-text colour for it (higher specificity wins over the .button rule). */
.cart-drawer .cart__checkout-button,
.cart__ctas .cart__checkout-button {
   color: rgb(var(--color-button-text)) !important;
}
#featured-collection-template--14841316540496__featured_collection_CrYLeK{
   scroll-margin-top: 20em;

}
#shopify-section-template--16303245590608__featured_collection_9CPFw6{
   scroll-margin-top: 25vh;
}

    
 @media screen and (min-width: 750px) {
  #Slider-template--14841316540496__featured_collection_hYM3z3{
    padding: 0px 22rem;
  }
   .newsletter-form {
       max-width: 60rem !important;
    }
   
 }   

@media (max-width: 575.98px) {
  #shopify-section-template--14414558920784__c7ba9211-e489-498f-9c30-7715212a28dc .gradient{
    padding-bottom: 1rem;
  }
  .fixed-section {
    top: 20rem;
  }
  .content-for-layout {
    margin-top: 5em;
  }
   slider-component.page-width {
        padding: 0px 6.5rem !important;
    }
  .imghome1 {
    width: 100%;
    padding: 0px 20%;
  }
   .imghome2{
    width: 100%;
    padding: 0px 2%;
  }
  h2{
   font-size: 2.4em !important;
  }
  .button-arrow{
    margin-left: 85%;
    position: absolute;
  }
  .custom-button {
    margin-left: -10px;
    margin-top: 10px;
  }
  .custom-btton-mobile{
  
    border-radius: 25px !important;
  }
   .custom-button-section {
    margin-top: -2rem;
    width: 100%;
    padding: 0px 5%;
  }
  .custom-button-2{
    font-size: 1.3169rem;
    width: 100%;
    min-width: 100%;
    padding: 0;
  }
  .fixed-section .custom-button-section {
    margin-top: -7rem;
    padding-top: 6rem;
    padding-bottom: 1rem;
  }
.newsletter-form__field-wrapper .field{
    display: block;
  }
  .newsletter-form__button{
    margin: 2rem auto !important;
    left: 0 !important;
  }
  .footer__localization:empty+.footer__column--info {
    align-items: center !important;
  }
  .section-template--14841316540496__featured_collection_CrYLeK-padding slider-component.page-width {
        padding: 0 0.5rem !important;
    }  
    .section-template--14841316540496__featured_collection_CrYLeK-padding .product-card-wrapper .card__content {
    margin-top: -5.5rem !important;
    padding: 0 !important;
}
}
media screen and (max-width: 769px){
  .imghome1 {
    width: 100%;
    padding: 0px 20%;
  }
 

}
@media only screen and (max-width:989px) and (min-width: 750px)  {
  #shopify-section-template--14414558920784__c7ba9211-e489-498f-9c30-7715212a28dc .gradient{
    padding-bottom: 1rem;
  }
  .fixed-section {
    top: 14rem;
  }
  .imghome1 {
    width: 100% !important;
    padding: 0px 20% !important;
  }
  
   #Slider-template--14841316540496__featured_collection_hYM3z3 .grid__item{
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
      #Slider-template--14841316540496__featured_collection_hYM3z3 {
        padding: 0px 10rem;
    }
}
@media only screen and (max-width: 1440px) and (min-width: 750px)  {
  
  
  
  .imghome1 {
    width: 100%;
    padding: 0px 20%;
  }
   .custom-button-section {
    width: 100% !important;
  }
  
  
}
@media screen and (min-width: 2000px) {
  .custom-button-section {
    width: 100% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
}

/* Global text-case rule — every word's first letter rendered in
   uppercase across the entire site. Form inputs/textareas excluded
   so typed input isn't distorted as the user types. NOTE: CSS
   capitalize only touches the first letter of each word; existing
   uppercase source text (e.g. "THE THREAD") stays uppercase. */
*:not(input):not(textarea) {
  text-transform: capitalize !important;
}

/* === The Thread — design-system overlay ===================
   Source: .claude/skills/design-system/colors_and_type.css
   Scope: home-page nav, hero text, custom buttons, site footer.
   Adds tokens + restyles without touching section markup. */

@font-face {
  font-family: "Thread X";
  src: url("Thread_x-Regular.otf") format("opentype"),
       url("Thread_x-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --thread-void:        #000000;
  --thread-pitch:       #1E1024;
  --thread-veil:        #3A2538;
  --thread-violet:      #7A1E80;
  --thread-violet-glow: #B445B8;
  --thread-violet-dim:  #4A1450;
  --thread-spirit:      #F2EAE0;
  --thread-bone:        #E8DED0;
  --thread-fg-muted:    #8a807a;
  --font-sigil:         "Thread X", "Times New Roman", serif;
  --font-thread-sans:   "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Follow the design system globally: body + every heading render in the
     Inter Tight sans stack. The runic Thread X (--font-sigil) stays reserved
     for the hero/identity elements that opt in explicitly. These override
     the Shopify-setting values set in theme.liquid (loaded before base.css). */
  --font-body-family:    var(--font-thread-sans);
  --font-heading-family: var(--font-thread-sans);
  --tracking-ritual:    0.28em;
  --glow-violet-sm:     0 0 12px rgba(180, 69, 184, 0.25);
  --glow-violet-md:     0 0 32px rgba(180, 69, 184, 0.35), 0 0 4px rgba(122, 30, 128, 0.6);
  --glow-violet-lg:     0 0 80px rgba(122, 30, 128, 0.5),  0 0 18px rgba(180, 69, 184, 0.4);
  --ease-veil:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base:           420ms;
}

/* Site header — pure-black field. The wrapper's background-color paints
   below the gradient pseudos (z-index 0) and below children (z-index 1),
   so the violet halo renders cleanly on top without interference. */
.header-wrapper,
.header-wrapper.gradient {
  background-color: var(--thread-void) !important;
  border-bottom: 0 !important;
  /* Soft feather below the bottom edge so the sticky header
     fades into the page content rather than ending on a hard line. */
  box-shadow:
    0 56px 72px -8px var(--thread-void),
    0 128px 160px -32px rgba(0, 0, 0, 0.55) !important;
}

.shopify-section-header,
.shopify-section-header.shopify-section-header-sticky {
  background-color: var(--thread-void) !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Logo seal — only the bottom 50% visible. Position is handled via layout
   (margin-top on the image, aspect-ratio on the link) so the transform
   property is reserved entirely for the JS-driven rotation. The image's
   border box is shifted up by half its own height, putting its geometric
   center at the link's top edge — which lands at the viewport top, so
   the rotation pivots there and the top half stays above the viewport. */
.header__heading-link {
  display: inline-block;
  overflow: visible;
  aspect-ratio: 4 / 1;
  line-height: 0;
}

.header__heading-logo {
  display: block;
  margin-top: -75%;
  transform-origin: 50% 50%;
}

/* Hero intro — centered h2 + h3 stack above the cover artwork,
   with 5% top margin per the ceremonial composition rule in the
   brand brief (center-aligned for hero / sleeve-front surfaces). */
.hero-intro {
  text-align: center;
  margin-top: 10%;
  /* Cap content at the global page width (the section background stays
     full-bleed). Uses --page-width so it tracks the theme setting. */
  max-width: var(--page-width);
  margin-inline: auto;
}

/* Outro video — autoplays / loops / no UI / centered above footer.
   The <video> markup uses muted + playsinline (required for autoplay
   on iOS Safari and most desktop browsers) and omits the `controls`
   attribute entirely so no player chrome renders.
   Entrance animation: fades up from 40px below as the element enters
   the viewport (triggered by IntersectionObserver in the section's
   inline <script>, which adds .in-view). 1600ms / --ease-veil per the
   brand's full-bleed-image-reveal duration. */
.hero-outro-video {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 4800ms var(--ease-veil),
    transform 4800ms var(--ease-veil);
  /* Exception to the global footer top margin: this outro video sits
     directly above the footer on the homepage. A -5vh bottom margin here
     cancels the footer's +5vh top margin, so the gap is removed for this
     element only — the override lives on the video, not the footer. */
  margin-bottom: -5vh;
}

.hero-outro-video.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-outro-video {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-outro-video video {
  width: 100%;
  max-width: 500px;
  display: block;
}

/* ============================================================
   Featured-collection / collection grid — design-system overhaul
   - Square corners (no 5px radius)
   - Hairline --thread-veil borders, not pale grey
   - Inter Tight body, Thread X for the optional heading
   - Spirit-white / bone text, not #D2D2D2 cool grey
   - Solid-violet "View all" as the section's primary CTA
   - All scoped to .collection so cart/account pages stay untouched
   ============================================================ */

/* Optional section heading (if .settings.title is set) */
.collection .collection__title h2,
.collection .collection__title .title {
  font-family: var(--font-sigil) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 2.5rem !important;
  color: var(--thread-spirit) !important;
  text-transform: lowercase !important;
  text-align: center;
}

/* Product card container */
.collection .product-card-wrapper,
.collection .card-wrapper {
  background-color: transparent !important;
  border: 1px solid var(--thread-veil) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: translateY(0);
  transition:
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil),
    transform var(--dur-base) var(--ease-veil);
}

/* Belt-and-suspenders: nothing inside the card may be wider than the
   card. Catches edge cases where Dawn's --image-padding setting or
   srcset-selected hi-res sources try to size past the wrapper. */
.collection .product-card-wrapper *,
.collection .card-wrapper * {
  max-width: 100%;
}

/* Dawn applies a second border + radius to .card / .card__inner per
   the card-style setting. Remove those so the only visible chrome
   is our outer violet hairline, and everything inside is square. */
.collection .card,
.collection .card--card,
.collection .card--standard,
.collection .card__inner {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.collection .card--card:after,
.collection .card--standard .card__inner:after {
  display: none !important;
}

.collection .product-card-wrapper:hover,
.collection .card-wrapper:hover {
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-md) !important;
  transform: translateY(-2px);
}

/* Image — slow scale on card hover so the artwork breathes inside its
   frame. Brand brief allows fades + lifts (no spring, bounce, or
   shrink-scale); a long ease-veil scale-grow reads as "drift". */
.collection .product-card-wrapper .card__media .media img,
.collection .card-wrapper .card__media .media img {
  transition: transform 900ms var(--ease-veil);
  transform: scale(1);
}

.collection .product-card-wrapper:hover .card__media .media img,
.collection .card-wrapper:hover .card__media .media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .collection .product-card-wrapper,
  .collection .card-wrapper,
  .collection .product-card-wrapper .card__media .media img,
  .collection .card-wrapper .card__media .media img {
    transition: none !important;
    transform: none !important;
  }
}

.collection .product-card-wrapper .card__inner,
.collection .card__inner {
  background-color: transparent !important;
  margin-top: 0 !important;
  /* No padding here — Dawn's .ratio class relies on padding-bottom
     to enforce the card's aspect ratio. Padding moves to .card__content. */
}

.collection .product-card-wrapper .card__content,
.collection .card__content {
  background-color: transparent !important;
  margin-top: 0 !important;
  padding: 12px !important;
}

/* Card image — square corners, contained inside the card with 3%
   breathing room on all sides so the artwork never crops or
   overflows the card's border. */
.collection .card__media,
.collection .card__media .media,
.collection .card__media img {
  border-radius: 0 !important;
}

.collection .product-card-wrapper .card__media,
.collection .card-wrapper .card__media {
  overflow: hidden !important;
}

/* Inset the absolutely-positioned .media wrapper inside .card__media
   by 3% on all four sides. The parent .card__media in Dawn is also
   position: absolute (filling .card__inner's ratio box), so giving
   .media explicit top/right/bottom/left offsets rather than padding
   is the only thing the absolute child actually respects. */
.collection .product-card-wrapper .card__media .media,
.collection .card-wrapper .card__media .media {
  top: 1em !important;
  right: 1em !important;
  bottom: 1em !important;
  left: 1em !important;
  width: auto !important;
  height: auto !important;
}

.collection .product-card-wrapper .card__media .media img,
.collection .card-wrapper .card__media .media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Product info — flattened with display:contents so its children (the
   title and the price block) become direct flex items of .card__content,
   letting the buy button sit BETWEEN them in the column ordering below. */
.collection .product-card-wrapper .card__information,
.collection .card-wrapper .card__information {
  display: contents !important;
}

/* Dawn renders two .card__content blocks per card. The inner one (a
   direct child of .card__inner) holds a duplicate title that sits above
   .card__media; hide it so only the OUTER .card__content (the footer,
   sibling of .card__inner, below the image) shows. Selector is kept more
   specific than the .card__content flex rule below so the hide always wins. */
.collection .product-card-wrapper .card__inner > .card__content,
.collection .card-wrapper .card__inner > .card__content {
  display: none !important;
}

/* Product title */
.collection .product-card-wrapper .card__heading,
.collection .card__heading,
.collection .card__heading a {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  color: var(--thread-spirit) !important;
  text-align: left !important;
}

/* Price — a pill "tag" in the card footer, kept in normal flow (not
   overlaying the image) so it stacks below the buy button instead of
   colliding with it. Brand brief reserves pill radii for "tags". */
.collection .card-wrapper .price,
.collection .product-card-wrapper .price {
  position: static !important;
  align-self: flex-start !important;
  background-color: var(--thread-void) !important;
  color: var(--thread-spirit) !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 1.0625rem !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: none;
}

/* Inner price spans inherit the pill's color so the bone-cream tone
   we set earlier doesn't bleed through inside the black pill. */
.collection .card-wrapper .price .price-item,
.collection .product-card-wrapper .price .price-item,
.collection .card-wrapper .price__regular .price-item,
.collection .product-card-wrapper .price__regular .price-item {
  color: var(--thread-spirit) !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card footer — single vertical column below the image, ordered
   title -> buy button -> price, so the elements stack in that order and
   the button no longer overlaps the price tag. */
.collection .product-card-wrapper .card__content,
.collection .card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.collection .product-card-wrapper .card__heading,
.collection .card-wrapper .card__heading {
  order: 1 !important;        /* title first */
}
.collection .product-card-wrapper .quick-add,
.collection .quick-add {
  order: 2 !important;        /* buy button between title and price */
  margin: auto 0 0 !important; /* margin-top:auto pins the button + price
                                  group to the bottom of the card */
}
.collection .product-card-wrapper .card-information,
.collection .card-wrapper .card-information {
  order: 3 !important;        /* price last */
}
.collection .product-card-wrapper .quick-add__submit,
.collection .quick-add__submit {
  min-height: 0 !important;   /* was 100%, which forced the overlap */
}

/* Quick-add buy button — matches the top-nav .custom-button style:
   violet-on-black, square, 1px violet border, ritual tracking, flat. */
.collection .product-card-wrapper .quick-add__submit,
.collection .quick-add__submit {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.9375rem !important;
  letter-spacing: var(--tracking-ritual) !important;
  text-transform: lowercase !important;
  color: var(--thread-violet-glow) !important;
  background-color: transparent !important;
  border: 1px solid var(--thread-violet) !important;
  border-radius: 0 !important;
  --border-offset: none;
  --shadow-horizontal-offset: 0 !important;
  --shadow-vertical-offset: 0 !important;
  --shadow-blur-radius: 0 !important;
  --shadow-opacity: 0 !important;
  --shadow-visible: 0 !important;
  --border-opacity: 1;
  text-align: center !important;
  padding: 14px 28px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  width: auto !important;
  transition:
    color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil) !important;
}
.collection .product-card-wrapper .quick-add__submit span,
.collection .quick-add__submit span {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
  letter-spacing: var(--tracking-ritual) !important;
  text-transform: lowercase !important;
}

.collection .quick-add__submit:hover {
  color: var(--thread-spirit) !important;
  background-color: transparent !important;
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-md) !important;
}

/* Suppress Dawn's default .button::after hover box so only the violet glow
   above shows — matches the top-nav .custom-button hover exactly. */
.collection .quick-add__submit:not([disabled]):hover:after {
  --border-offset: none;
  box-shadow: none !important;
}

/* "View all" — primary solid-violet CTA */
.collection .collection__view-all .button,
.collection .collection__view-all a.button,
.collection .collection__view-all .button--secondary {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.9375rem !important;
  letter-spacing: var(--tracking-ritual) !important;
  text-transform: lowercase !important;
  color: var(--thread-spirit) !important;
  background-color: var(--thread-violet) !important;
  background-image: none !important;
  border: 1px solid var(--thread-violet) !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  min-height: 0 !important;
  min-width: 200px;
  line-height: 1 !important;
  box-shadow: var(--glow-violet-sm) !important;
  --border-offset: none;
  --shadow-horizontal-offset: 0 !important;
  --shadow-vertical-offset: 0 !important;
  --shadow-blur-radius: 0 !important;
  --shadow-opacity: 0 !important;
  --shadow-visible: 0 !important;
  transition:
    background-color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil);
}

.collection .collection__view-all .button:hover {
  background-color: var(--thread-violet-glow) !important;
  border-color: var(--thread-violet-glow) !important;
  color: var(--thread-spirit) !important;
  box-shadow: var(--glow-violet-md) !important;
}

.collection .collection__view-all .button:active {
  background-color: var(--thread-violet-dim) !important;
  border-color: var(--thread-violet-dim) !important;
  transform: translateY(1px);
}

.collection .collection__view-all .button:focus-visible {
  outline: 1px solid var(--thread-violet-glow);
  outline-offset: 3px;
}

.collection .collection__view-all {
  margin-top: 48px !important;
  text-align: center;
}

/* Slider chrome — hairline, square, no fill */
.collection .slider-button {
  background-color: transparent !important;
  border: 1px solid var(--thread-veil) !important;
  border-radius: 0 !important;
  color: var(--thread-spirit) !important;
  transition:
    color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil);
}

.collection .slider-button:hover {
  color: var(--thread-violet-glow) !important;
  border-color: var(--thread-violet-glow) !important;
}

.collection .slider-counter {
  font-family: var(--font-thread-sans) !important;
  letter-spacing: var(--tracking-ritual) !important;
  color: var(--thread-fg-muted) !important;
  font-size: 0.75rem !important;
}

/* Product page gallery media — paint the .product__media box #333333 to
   match the grey the collection cards read as behind their artwork. The
   div carries .media / .gradient / .global-media-settings, all of which
   set a background; shorthand here resets the .gradient background-image
   + fixed attachment so only the flat grey shows behind
   transparent/letterboxed product images. */
.product .product__media {
  background: #333333 !important;
}

/* Footer always sits above other page content so the sticky-header
   feather shadow and any in-flow effects (e.g. the outro video's
   pre-animation transform) can't overlap or bleed over it. */
.footer {
  position: relative;
  z-index: 1000;
}

/* The cart drawer (<cart-drawer class="drawer">) defaults to z-index 1000 —
   equal to the footer above — so the footer painted over the open drawer on
   desktop (where it overlaps the checkout button). component-cart-drawer.css
   loads after base.css via the header section, so a bare `.drawer` override
   loses on source order; `cart-drawer.drawer` raises specificity to win and
   lifts the cart above the footer. */
cart-drawer.drawer {
  z-index: 1001;
}

/* Global footer top margin. Uses element+class (footer.footer, 0-1-1) to
   outrank the footer section's own inline `.footer { margin-top: <setting>px }`
   rule (0-1-0), which is rendered in-body after this stylesheet and would
   otherwise win on source order and nullify this. */
footer.footer {
  margin-top: 5vh;
}

/* Featured-product section — 180px top breathing room plus 5% bottom
   margin. The section's schema caps padding_top at 100, so the extra
   space lives here as margin instead. Targets the section's outer
   class, not its template-specific ID, so this survives template
   duplications. Mobile scales to ~0.75x to match Dawn's default
   responsive padding curve. */
.featured-product {
  margin-top: 135px;
  margin-bottom: 5%;
}

@media screen and (min-width: 750px) {
  .featured-product {
    margin-top: 180px;
  }
}

/* Featured-product buy buttons — Add-to-cart + dynamic checkout.
   Same brand language as .custom-button: lowercase, ritual tracking,
   violet hairline, square, transparent fill, violet-glow on hover.
   !important is required throughout to beat Dawn's global .button
   color (set with !important elsewhere in this stylesheet) and any
   inline styles injected by Shopify's payment-button web component.
   Note: the Shop-Pay-branded button (purple gradient) is partially
   locked by Shopify's JS — text and gradient inside it can't be
   fully overridden from the host page. */
.featured-product .product-form__submit,
.featured-product .shopify-payment-button__button,
.featured-product .shopify-payment-button__button--unbranded,
.featured-product .shopify-payment-button__button--branded {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.9375rem !important;
  letter-spacing: var(--tracking-ritual) !important;
  text-transform: lowercase !important;
  color: var(--thread-violet-glow) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--thread-violet) !important;
  border-radius: 0 !important;
  --border-offset: none;
  --shadow-horizontal-offset: 0 !important;
  --shadow-vertical-offset: 0 !important;
  --shadow-blur-radius: 0 !important;
  --shadow-opacity: 0 !important;
  --shadow-visible: 0 !important;
  padding: 14px 28px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  transition:
    color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil);
}

.featured-product .product-form__submit:hover,
.featured-product .shopify-payment-button__button:hover,
.featured-product .shopify-payment-button__button--unbranded:hover,
.featured-product .shopify-payment-button__button--branded:hover {
  color: var(--thread-spirit) !important;
  background-color: transparent !important;
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-md) !important;
}

.featured-product .product-form__submit:not([disabled]):hover:after {
  --border-offset: none;
  box-shadow: none;
}

.featured-product .product-form__submit:active,
.featured-product .shopify-payment-button__button:active {
  color: var(--thread-violet) !important;
  border-left: 1px solid var(--thread-violet) !important;
  transform: translateY(1px);
}

.featured-product .product-form__submit:focus-visible,
.featured-product .shopify-payment-button__button:focus-visible {
  outline: 1px solid var(--thread-violet-glow);
  outline-offset: 2px;
}

.hero-intro h2 {
  margin-bottom: 0;
}

/* Hero CTAs — two side-by-side design-system buttons that sit
   below the h3 in the hero stack. Solid-violet fill marks these
   as the page's primary high-visibility actions (the brand brief
   reserves accent fills for the most important moments). */
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 3em;
  flex-wrap: wrap;
}

.hero-cta .custom-button {
  margin: 0;
  flex: 0 0 auto;
  min-width: 160px;
  background-color: var(--thread-violet) !important;
  background-image: none !important;
  color: var(--thread-spirit) !important;
  border-color: var(--thread-violet) !important;
  box-shadow: var(--glow-violet-sm) !important;
}

.hero-cta .custom-button:hover {
  background-color: var(--thread-violet-glow) !important;
  border-color: var(--thread-violet-glow) !important;
  color: var(--thread-spirit) !important;
  box-shadow: var(--glow-violet-md) !important;
}

.hero-cta .custom-button:active {
  background-color: var(--thread-violet-dim) !important;
  border-color: var(--thread-violet-dim) !important;
  color: var(--thread-spirit) !important;
  transform: translateY(1px);
}

.hero-cta .custom-button:focus-visible {
  outline: 1px solid var(--thread-violet-glow);
  outline-offset: 3px;
}

html {
  scroll-behavior: smooth;
}

.hero-intro h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Hero image — slow fade-in entrance. Brand brief allows up to
   1600ms (--dur-veil) for full-bleed image reveals; this is right
   at that ceiling, with --ease-veil for the long-exposure feel. */
.hero-image {
  animation: hero-image-fade-in 8000ms var(--ease-veil) both;
}

@keyframes hero-image-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image {
    animation: none;
  }
}

/* Hero image — large violet glow. The brief reserves glow for the
   active / important element on a screen; the album cover is the
   homepage's key visual.
   Uses filter: drop-shadow rather than box-shadow because .imghome1
   has `width: 100%; padding: 0 33%`, so its element box is full-width
   while the rendered artwork sits in the middle. drop-shadow follows
   the alpha of the rendered pixels and hugs the actual image edges. */
.hero-image .imghome1 {
  filter:
    drop-shadow(0 0 80px rgba(122, 30, 128, 0.5))
    drop-shadow(0 0 18px rgba(180, 69, 184, 0.4));
}

/* Radial violet vignette behind the logo —
   the only gradient the brand brief permits.
   Two pseudos stacked, opacity crossfade between initial and scrolled. */
.header-wrapper,
.header-wrapper.gradient {
  background-image: none !important;
  isolation: isolate;
}

.header-wrapper > * {
  position: relative;
  z-index: 1;
}

.header-wrapper::before,
.header-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  transition: opacity 4800ms var(--ease-veil);
}

/* Initial state — full-width wash, peaks just above the brand haze token */
.header-wrapper::before {
  background-image: radial-gradient(
    ellipse 100% 130% at 50% 0%,
    rgba(180, 69, 184, 0.32) 0%,
    rgba(122, 30, 128, 0.18) 22%,
    rgba(122, 30, 128, 0.07) 50%,
    transparent 72%
  );
  opacity: 1;
}

/* Scrolled state — tighter, wider, hovering near the haze level throughout */
.header-wrapper::after {
  background-image: radial-gradient(
    ellipse 45% 65% at 50% 0%,
    rgba(180, 69, 184, 0.20) 0%,
    rgba(122, 30, 128, 0.10) 22%,
    rgba(122, 30, 128, 0.03) 50%,
    transparent 72%
  );
  opacity: 0;
}

.shopify-section-header-sticky .header-wrapper::before {
  opacity: 0;
}
.shopify-section-header-sticky .header-wrapper::after {
  opacity: 1;
}

/* Top nav — three equal-width buttons spanning 90% of the header.
   Lives inside .header's CSS grid; force a full-width new row. */
.top-nav-thread {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 90%;
  max-width: none;
  margin: 0 auto;
  padding: 12px 0 16px;
}

.header .top-nav-thread {
  grid-column: 1 / -1;
}

.top-nav-thread .custom-button {
  flex: 1 1 0;
  margin: 0;
}

@media (max-width: 749px) {
  .top-nav-thread {
    gap: 8px;
    padding: 8px 0 12px;
  }
  .top-nav-thread .custom-button {
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }
}

/* Hero / section headlines ("petal rock black", "Official Trailer") */
.video-header {
  font-family: var(--font-sigil);
  font-weight: 400;
  font-style: normal;
  font-size: 3.5rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--thread-spirit);
  text-transform: lowercase;
  text-align: center;
  padding-bottom: 24px;
}

/* Top-nav + CTA-nav buttons: violet-on-black, square, ritual tracking */
.custom-button,
.custom-button-2 {
  font-family: var(--font-thread-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  letter-spacing: var(--tracking-ritual);
  text-transform: lowercase;
  color: var(--thread-violet-glow);
  background-color: transparent;
  border: 1px solid var(--thread-violet);
  border-radius: 0 !important;
  --border-offset: none;
  --shadow-horizontal-offset: 0 !important;
  --shadow-vertical-offset: 0 !important;
  --shadow-blur-radius: 0 !important;
  --shadow-opacity: 0 !important;
  --shadow-visible: 0 !important;
  --border-opacity: 1;
  padding: 14px 28px;
  line-height: 1;
  min-height: 0;
  min-width: 160px;
  width: auto;
  transition:
    color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil);
}

.custom-button:hover,
.custom-button-2:hover {
  color: var(--thread-spirit) !important;
  background-color: transparent !important;
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-md);
}

.custom-button:not([disabled]):hover:after,
.custom-button-2:not([disabled]):hover:after {
  --border-offset: none;
  box-shadow: none;
}

.custom-button:active,
.custom-button-2:active {
  color: var(--thread-violet) !important;
  border-left: 1px solid var(--thread-violet);
  transform: translateY(1px);
}

.custom-button:focus-visible,
.custom-button-2:focus-visible {
  outline: 1px solid var(--thread-violet-glow);
  outline-offset: 2px;
}

/* Footer — bring text + form into the brand */
.footer .footer-block,
.footer .footer-block__details-content,
.footer .footer-block__details-content .list-menu__item--link,
.footer .copyright__content,
.footer .copyright__content a,
.footer .field__label,
.footer .newsletter-form__field-wrapper .field__input,
.footer .newsletter-form__button {
  font-family: var(--font-thread-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.footer .footer-block__heading {
  font-family: var(--font-sigil) !important;
  font-weight: 400 !important;
  font-size: 1.625rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--thread-spirit);
}

.footer .footer-block__details-content,
.footer .footer-block__details-content .list-menu__item--link {
  letter-spacing: var(--tracking-ritual);
  text-transform: lowercase;
  color: var(--thread-bone);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-veil),
              border-color var(--dur-base) var(--ease-veil);
}

.footer .footer-block__details-content .list-menu__item--link:hover {
  color: var(--thread-violet-glow);
  border-bottom-color: var(--thread-violet-glow);
}

.footer .copyright__content,
.footer .copyright__content a {
  color: var(--thread-fg-muted) !important;
  font-size: 0.6875rem !important;
  letter-spacing: var(--tracking-ritual);
  text-transform: lowercase;
}

.footer .copyright__content a:hover {
  color: var(--thread-violet-glow) !important;
}

.footer .footer__content-bottom {
  border-top: 1px solid var(--thread-veil) !important;
}

/* Newsletter form — square, hairline border, violet glow on focus */
.footer .newsletter-form__field-wrapper .field__input {
  background-color: var(--thread-pitch) !important;
  color: var(--thread-spirit) !important;
  border: 1px solid var(--thread-veil) !important;
  border-radius: 0 !important;
  letter-spacing: 0;
  text-transform: none;
}

.footer .newsletter-form__field-wrapper .field__input:focus {
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-sm);
}

.footer .field__label {
  color: var(--thread-fg-muted) !important;
  letter-spacing: var(--tracking-ritual);
  text-transform: lowercase;
}

.footer .newsletter-form__button {
  background-color: transparent !important;
  color: var(--thread-violet-glow) !important;
  border: 1px solid var(--thread-violet) !important;
  border-radius: 0 !important;
  letter-spacing: var(--tracking-ritual);
  text-transform: lowercase;
  transition:
    color var(--dur-base) var(--ease-veil),
    border-color var(--dur-base) var(--ease-veil),
    box-shadow var(--dur-base) var(--ease-veil);
}

.footer .newsletter-form__button:hover {
  color: var(--thread-spirit) !important;
  border-color: var(--thread-violet-glow) !important;
  box-shadow: var(--glow-violet-md);
}

/* === end design-system overlay === */

/* Featured Work section — centered heading + CTA below the hero video
   (sections/featured-work.liquid). Lives outside .hero-intro, so it
   needs its own centering and h3 margins to match the hero treatment. */
.featured-work {
  text-align: center;
  /* Cap content at the global page width (section background stays
     full-bleed), matching .hero-intro. */
  max-width: var(--page-width);
  margin-inline: auto;
}

.featured-work h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Looping, no-UI video below the listen button. Fills the (already
   975-capped) .featured-work column; the button's hero-cta bottom
   margin provides the gap above it.
   Entrance: slow fade-in when scrolled into view — an IntersectionObserver
   in the section adds .in-view. Same 4800ms / --ease-veil tempo as the
   hero outro video, for a consistent brand reveal. */
.featured-work__video {
  position: relative; /* anchor for the centered play button */
  opacity: 0;
  transition: opacity 4800ms var(--ease-veil);
}

.featured-work__video.in-view {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .featured-work__video {
    opacity: 1;
    transition: none;
  }
}

.featured-work__video video {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Overlay that centers the play button over the video. Centering lives
   here (flex) rather than on the button via transform, so the button's
   own :active/:focus transform can't knock it out of place. pointer-events
   are off on the overlay so only the button itself is clickable. */
.featured-work__play-opener {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* "play" control. Reuses .custom-button for type + border, then overrides
   the base button's margin/min-height and applies the same violet fill as
   the hero CTAs. !important mirrors the .hero-cta .custom-button block
   (needed to beat Dawn's .button base). */
.featured-work__video-play {
  pointer-events: auto;
  margin: 0 !important;
  min-height: 0;
  min-width: 160px;
  background-color: var(--thread-violet) !important;
  background-image: none !important;
  color: var(--thread-spirit) !important;
  border-color: var(--thread-violet) !important;
  box-shadow: var(--glow-violet-sm) !important;
}

.featured-work__video-play:hover {
  background-color: var(--thread-violet-glow) !important;
  border-color: var(--thread-violet-glow) !important;
  color: var(--thread-spirit) !important;
  box-shadow: var(--glow-violet-md) !important;
}

.featured-work__video-play:focus-visible {
  outline: 1px solid var(--thread-violet-glow);
  outline-offset: 3px;
}

/* Anchor target for in-page links (e.g. hero "pre-order" -> featured collection).
   scroll-margin-top keeps the section clear of the sticky header on jump. */
.featured-collection__anchor {
  display: block;
  scroll-margin-top: 2rem;
}

/* Product gallery image caption (renders image alt text below each image) */
.product__media-caption {
  margin-top: 0.8rem;
  text-align: center;
  color: rgba(var(--color-foreground), 0.75);
  font-style: italic;
}

/* On mobile Dawn makes .product__media-item a row flex, which floats the caption
   beside the image. Force the caption onto its own full-width line below the image. */
@media screen and (max-width: 749px) {
  .product__media-item:has(.product__media-caption) {
    flex-wrap: wrap;
  }

  .product__media-caption {
    flex: 0 0 100%;
  }
}

/* Custom CSS Dev Derrick --end */