/** Shopify CDN: Minification failed

Line 4466:0 Expected "}" to go with "{"

**/
/* 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-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);
  --alpha-button-background: 0;
}

.color-background-2 .button--secondary,
.color-inverse .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
  --color-button: var(--color-foreground);
  --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));
}

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

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

.spaced-section {
  margin-top: 5rem;
}

.spaced-section:last-child {
  margin-bottom: 5rem;
}

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

  .spaced-section {
    margin-top: calc(5rem + var(--page-width-margin));
  }

  .spaced-section:last-child {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.spaced-section--full-width + .spaced-section--full-width {
  margin-top: 0;
}

.spaced-section--full-width:first-child {
  margin-top: 0;
}

.spaced-section--full-width:last-child {
  margin-bottom: 0;
}

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);
  padding: 4rem 0 5rem;
}

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

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

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

.hidden {
  display: none !important;
}

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

.center {
  text-align: center;
}

.right {
  text-align: right;
}

@media screen and (min-width: 750px) {
  .desktop-align-center {
    text-align: center;
  }
  .desktop-align-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;
}

.link[role="link"]: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;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
  --ng-sizechart-offset: 84px;
}

.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: 4rem 0 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;
}

@media screen and (min-width: 990px) {
  .title-wrapper-with-link.title-wrapper-with-link--no-heading {
    display: none;
  }
}

.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;
  margin-left: -0.5rem;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .grid {
    margin-left: -1rem;
  }
}

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

@media screen and (min-width: 750px) {
  .grid__item {
    padding-left: 1rem;
    padding-bottom: 1rem;
    width: calc(25% - 1rem * 3 / 4);
    max-width: 33.3%;
  }
}

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

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

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid--one-third-max.grid--3-col-tablet .grid__item {
    max-width: 33.33%;
  }
}

@media screen and (min-width: 990px) {
  .grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: 25%;
  }
}

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

.grid--3-col .grid__item {
  width: calc(33.33% - 0.5rem * 2 / 3);
}

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

.grid--2-col .grid__item {
  width: calc(50% - 0.5rem / 2);
}

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

  .grid--4-col-tablet .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - 1rem / 2);
  }
}

@media screen and (min-width: 990px) {
  .grid--4-col-desktop .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - 1rem / 2);
  }
}

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

.grid__item--full-width {
  flex: 0 0 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 {
    width: calc(50% - 3.75rem / 2);
  }

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

  .grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

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

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - 4rem * 2 / 3);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
    width: calc(50% - 4rem / 2);
  }

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

  .slider--tablet.grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

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

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

/* 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 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  padding: 0.9rem 3rem 1.1rem;
  text-decoration: none;
  border: 0.1rem solid transparent;
  border-radius: 0;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
  color: rgb(var(--color-button-text));
  min-width: 12rem;
  min-height: 4.5rem;
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
}

.button:focus-visible {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible) {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
}

.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: 9rem;
  min-height: 3.5rem;
}

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

/* Button - hover */

.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), var(--alpha-button-border));
}

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

/* 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 {
  background: rgb(var(--color-background));
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

.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: transparent;
  border: 0.1rem solid transparent;
  border-radius: 0;
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  height: 4.5rem;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
}

.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__input:hover,
.select__select:hover,
.customer .field input:hover,
.customer select:hover,
.localization-form__select:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  outline: transparent;
}

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

/* Select */

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

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 4rem 0 1.5rem;
}

/* Field */

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

.customer .field {
  display: block;
}

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

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

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: 1.5rem;
  top: 1rem;
  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: 0.3em;
  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;
}

.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);
  padding: 1.2rem;
  min-height: 10rem;
  resize: none;
}

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

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 {
  border: 0.1rem solid rgba(var(--color-base-text), 0.08);
  position: relative;
  height: 4.5rem;
  width: calc(14rem / var(--font-body-scale));
  display: flex;
}

.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 svg {
  width: 1rem;
  pointer-events: none;
}

.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: flex;
  width: 100%;
  padding: 1rem 2rem;
  text-decoration: none;
  justify-content: center;
  align-items: flex-start;
}
.announcement-bar__link svg {
  margin-right: 12px;
  fill: rgb(var(--color-foreground));
  flex: 0 0 auto;
  margin-top: 1px;
  background-color: unset;
}

.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 {
  text-align: center;
  margin: 0;
  letter-spacing: 0;
  color: rgba(var(--color-foreground), 1);
  font-size: 14px;
  line-height: 1.3em;
}

/* 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.animate {
  transition: transform 0.15s ease-out;
}

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

.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 1fr 1fr;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header-drawer {
  grid-area: navigation;
}

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

  header-drawer {
    grid-area: drawer;
  }

  .header--has-menu:not(.header--middle-left) {
    padding-bottom: 1rem;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      "heading icons"
      "navigation navigation";
    grid-template-columns: 1fr auto;
  }

  .header--top-left.header-mobile-menu {
    grid-template-areas: "heading icons drawer";
    grid-template-columns: 1fr auto auto;
    column-gap: 2rem;
  }

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

  .header--middle-left.header-mobile-menu {
    grid-template-areas: "heading icons drawer";
    grid-template-columns: auto 1fr auto;
  }

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

  .header--top-center.header-mobile-menu {
    grid-template-areas: "left-icon heading icons";
    column-gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .header--top-center.header-mobile-menu header-drawer {
    margin-left: 0;
  }

  .header--top-center.header-mobile-menu .header__icons header-drawer {
    display: block;
  }

  .header--top-center.header-mobile-menu .header__icon--cart {
    margin-right: 0;
  }

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

  .header--middle-center {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: 1fr 1fr 1fr;
  }

  .header--middle-center.header-mobile-menu {
    grid-template-areas: "drawer heading icons";
    grid-template-columns: 1fr 1fr 1fr;
  }

  .header--has-menu.header--middle-center {
    padding-bottom: 1rem;
  }

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

  .header--middle-center .header__heading {
    justify-self: center;
  }
}

.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-flex;
  margin: 0.75rem 0;
  text-decoration: none;
  word-break: break-word;
  position: relative;
}

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

.header .header__heading-logo-light {
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.header .header__heading-logo {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}

#template-index
  .header-wrapper-transparent:not(.mega-menu-opened)
  .header.site-header-transparent
  .header__heading-logo,
.header .header__heading-logo.header__heading-logo-light {
  opacity: 0;
}

@media screen and (min-width: 450px) {
  .header .h2.header__heading-logo.header__heading-logo-light {
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    height: auto;
  }
  #template-index .header .h2.header__heading-logo {
    white-space: nowrap;
    height: auto;
  }
}
@media screen and (max-width: 450px) {
  .header .h2.header__heading-logo.header__heading-logo-light {
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    height: auto;
    font-size: calc(var(--font-heading-scale) * 1.5rem);
  }
  #template-index .header .h2.header__heading-logo {
    white-space: nowrap;
    height: auto;
    font-size: calc(var(--font-heading-scale) * 1.5rem);
  }
}

#template-index
  .header-wrapper-transparent:not(.mega-menu-opened)
  .header.site-header-transparent
  .header__heading-logo.header__heading-logo-light {
  opacity: 1;
}

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

@media screen and (min-width: 990px) {
  .header__heading-link {
    /*margin-left: -0.75rem;*/
  }

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

  .header--top-left .header__heading,
  .header--top-left .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;
}

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

.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__icons header-drawer {
    display: none;
  }
}

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

.header .header_social .list-social {
  justify-content: flex-start;
}
.header .header_social {
  display: none;
}

@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;*/
  }
  .header .header_social {
    display: block;
  }
}

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

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

.header__inline-menu details[open] > .header__submenu {
  opacity: 1;
  transform: translateY(0);
  animation: animateMenuOpen var(--duration-default) ease;
  z-index: 1;
}

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

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

.header__submenu.list-menu {
  padding: 2rem 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 {
  padding: 0.95rem 3.5rem 0.95rem 2rem;
}

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

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

.header__submenu .icon-caret {
  right: 2rem;
}

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: 4rem;
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 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: 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;
  }
}

/* FAQ Section */
.faq_page {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 50px;
}
.faq_page_subheader {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  letter-spacing: 0;
  text-transform: inherit;
  font-size: 24px;
}
.faq_page details {
  padding-top: 20px;
}
.faq_page details p {
  padding-left: 20px;
}
.faq_page summary {
  padding: 10px;
  background: #f9f9f9; /*= Change this to change the background color of your FAQ element =*/
  border-radius: 3px;
  outline: none;
  position: relative;
  border: 1px solid #000; /*= Change this to change the border color & thickness of your FAQ element =*/
}
.faq_page details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}
.faq_page details[open] ~ * {
  animation: inherit;
}
.faq_page summary::after {
  content: " ❮";
  transform: translateY(-50%) rotate(180deg);
  position: absolute;
  right: 5%;
  color: #000; /*= Change this to change the color of your arrow of the FAQ element =*/
  top: 50%;
}
.faq_page details[open] summary:after {
  content: " ❯";
  transform: translateY(-50%) rotate(90deg);
}

.collection > .center {
  position: relative;
  z-index: 2;
}

.shopify-section-group-header-group,
#shopify-section-header {
  z-index: 5;
}

.product-form__input input[type="radio"] + label {
  border-radius: unset !important;
}

html {
  scroll-behavior: smooth;
}

/* Quick Options Drawer */
.quick-options-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -600px;
  width: 600px;
  max-width: 100%;
  transition: all 0.3s ease-in-out;
  z-index: 20;
}
.quick-options-drawer.open {
  right: 0;
}
.quick-options-drawer-inner {
  overflow-y: auto;
  height: 100%;
  background-color: var(--gradient-background);
  border-left: 0px solid var(--color-icon);
  z-index: 19;
  position: relative;
}
.quick-options-drawer-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.3);
  display: block !important;
  visibility: hidden;
}
.quick-options-drawer.open .quick-options-drawer-overlay {
  z-index: 2;
  visibility: visible;
}
/* Base: keep it hidden when drawer is closed */
.quick-options-drawer-close {
  display: none;                /* not visible by default */
  position: absolute;           /* relative to the drawer panel */
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.96);
  z-index: 2;                   /* above inner content, but inside drawer */
  cursor: pointer;
}

/* Only show & fix it when the drawer is open */
.quick-options-drawer.open .quick-options-drawer-close {
  display: block;
  position: fixed;              /* pin while drawer is active */
  top: 12px;
  right: 16px;
  z-index: 5002;                /* top-most */
}

.quick-options-drawer-close:before,
.quick-options-drawer-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #111;
  transform: translate(-50%, -50%) rotate(45deg);
}
.quick-options-drawer-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 450px) {
  .quick-options-drawer-inner {
    border-left: 0;
  }
}
.quick-options-drawer-inner > section {
  margin: 0;
}
.quick-options-drawer-inner section.page-width {
  padding: 40px 20px 20px 20px !important;
}
.quick-options-drawer-inner .product__media-wrapper,
.quick-options-drawer-inner .product__info-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
.quick-options-drawer-inner .product__info-wrapper {
  padding-left: 0;
  padding-top: 20px;
}
.quick-options-drawer-inner .product .product__media-item .product__media {
  padding-top: 100% !important;
}
/* The media list must be a horizontal track with 100% slides */
.quick-options-drawer-inner .product__media-list{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  overflow: hidden !important;
  scroll-snap-type: x mandatory !important;
}

/* Each slide = full width block that snaps */
.quick-options-drawer-inner .product__media-item{
  display: block !important;
  width: 100% !important;
  scroll-snap-align: start !important;
}

/* Ensure Dawn’s main slider is a clipping container and arrows clickable */
.quick-options-drawer-inner .main-media-slider{
  position: relative;
  overflow: hidden;
}
.quick-options-drawer-inner .main-media-slider .slider-button{
  display: flex !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}
@media screen and (min-width: 750px) {
  .quick-options-drawer-inner .product__media-list .product__modal-opener {
    width: 100%;
  }
}
.quick-options-drawer-inner .product__media-list .product__media-item {
  /*width: calc(100% - 3rem)*/;
}
.quick-options-drawer-inner .main-media-slider .slider-button {
  display: block !important;
}

.quick-options-drawer-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.button {
  min-width: 22rem;
}
@media screen and (max-width: 474px) {
  .grid__item .button {
    min-width: unset;
  }
  .image-with-text__content .image-with-text__text + .button {
    flex-grow: 2;
    flex-basis: 100%;
    width: 100%;
  }
  body :not(.banner__buttons) .button {
    display: flex;
    max-width: unset;
  }
  body .banner__buttons {
    display: flex;
    width: 100%;
  }
  body .banner__buttons .button {
    width: 100%;
  }
}

.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));
  z-index: -1;
}

html {
}
body:not(.quick-options-open) {
}

/* PAGE TRANSITION ANIMATION */
.loaded .transition-cover {
  opacity: 0;
  visibility: hidden;
}
.unloading .transition-cover {
  opacity: 1;
  visibility: visible;
}
.transition-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgb(var(--color-background));
  z-index: 1000;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: var(--duration-default);
  transition-timing-function: ease;
}
.unloading.loaded .loading-bar {
  display: none;
}
.loading-bar {
  width: 13rem;
  height: 0.2rem;
  border-radius: 0.2rem;
  background-color: rgb(235, 235, 235);
  position: relative;
  overflow: hidden;
}
.loading-bar::after {
  content: "";
  height: 100%;
  width: 6.8rem;
  position: absolute;
  transform: translate(-3.4rem);
  background-color: rgb(var(--color-base-text));
  border-radius: 0.2rem;
  animation: initial-loading 1.5s ease infinite;
}
@keyframes initial-loading {
  0% {
    transform: translate(-3.4rem);
  }
  50% {
    transform: translate(9.6rem);
  }
  to {
    transform: translate(-3.4rem);
  }
}
@media (max-width: 749px) {
  /* Target every slideshow, or narrow to a specific one by ID if you want */
  .slideshow.banner {
    min-height: 100vh;               /* full screen height */
  }
  .slideshow.banner .banner__media {
    position: relative;
  }
  .slideshow.banner .banner__media img {
    width: 100%;
    height: 100vh;                   /* force image to fill screen height */
    object-fit: cover;               /* crop sides, keep center */
    object-position: center;
    display: block;
  }

  /* If your header is sticky and overlaps, subtract its height: */
  /* .slideshow.banner { min-height: calc(100vh - var(--header-height, 64px)); }
     .slideshow.banner .banner__media img { height: calc(100vh - var(--header-height, 64px)); } */
}
/* ===== Floating NG Topbar (logo left, links right) ===== */

/* Hide Dawn header chrome so only our custom bar shows */
.header { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Hide the hamburger button only (drawer still exists) */
.header__icon--menu,
summary#header-menu { display: none !important; }

/* Make the theme header wrapper transparent so the banner shows behind */
.header-wrapper {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

/* Only one of our bars visible per breakpoint (keep these if you use the desktop bar too) */
@media (max-width: 989px){ .ng-topbar--desktop{ display:none !important; } }
@media (min-width: 990px){ .ng-topbar--mobile{ display:none !important; } }

/* --- Full-width floating bar --- */
.ng-topbar{
  background: transparent;        /* wrapper is transparent to float over banner */
  border: 0;
  position: relative;
  z-index: 6;
}
.ng-topbar__inner{
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;

  /* the visible “floating” bar */
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(6px);
  border: 1px solid rgba(0,0,0,.12);     /* single hairline all around */
}

/* Logo left (slightly larger but fits in 48px bar) */
.ng-brand{ display:flex; align-items:center; margin-right:auto; }
.ng-brand img, .ng-brand .ng-brand__text{
  display:block; height: 26px; line-height: 26px; width:auto;
}

/* Links right with vertical dividers; no bottom borders */
.ng-nav{ display:flex; align-items:center; margin-left:auto; gap:0; }
.ng-link, .ng-link--btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 14px; margin:0; white-space:nowrap;

  text-decoration:none; text-transform:uppercase;
  letter-spacing:.12em; font-weight:600; font-size:12px;
  color: rgba(0,0,0,.8);
  /* vertical hairlines between items */
  border-left: 1px solid rgba(0,0,0,.12);
}
.ng-link:first-child, .ng-link--btn:first-child{ border-left:0; }
.ng-link:hover, .ng-link--btn:hover{ color:#000; }

/* Tiny phones guard rails */
@media (max-width: 389px){
  .ng-topbar__inner{ height:46px; }
  .ng-brand img, .ng-brand .ng-brand__text{ height:24px; line-height:24px; }
  .ng-link, .ng-link--btn{ padding:0 12px; letter-spacing:.11em; font-size:11px; }
}
/* === FORCE NG TOPBAR LAYOUT + FLOAT === */

/* float the header over the banner */
.header-wrapper{ background:transparent !important; border-bottom-color:transparent !important; }
.ng-topbar{ position: sticky; top: 0; z-index: 6; background: transparent !important; border: 0 !important; }

/* opaque floating rectangle */
.ng-topbar__inner{
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(6px);
  border: 1px solid rgba(0,0,0,.12);
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;  /* <-- key */
}

/* logo left, links right */
.ng-brand{ order:0 !important; margin-right:auto !important; display:flex; align-items:center; }
.ng-brand img, .ng-brand .ng-brand__text{ height:26px; width:auto; display:block; }

.ng-nav{
  order:1 !important;
  display:flex !important;
  align-items:center;
  margin-left:auto !important;              /* <-- pushes to right edge */
  gap:0;
}

/* link look + dividers (no bottom borders) */
.ng-link, .ng-link--btn{
  appearance:none; border:0; background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 14px; margin:0;
  text-decoration:none; text-transform:uppercase; letter-spacing:.12em;
  font-weight:600; font-size:12px; color:rgba(0,0,0,.85);
  border-left:1px solid rgba(0,0,0,.12);
}
.ng-link:first-child, .ng-link--btn:first-child{ border-left:0; }
.ng-link:hover, .ng-link--btn:hover{ color:#000; }

/* remove Shopify hamburger if it still appears */
.header__icon--menu, summary#header-menu{ display:none !important; }

/* tiny phones safety */
@media (max-width:389px){
  .ng-topbar__inner{ height:46px; }
  .ng-brand img, .ng-brand .ng-brand__text{ height:24px; }
  .ng-link, .ng-link--btn{ padding:0 12px; font-size:11px; letter-spacing:.11em; }
}
/* Neutralize Dawn's grid on the built-in header */
#site-header {
  display: block !important;               /* stop using grid */
  grid-template-areas: initial !important;
  grid-template-columns: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Make header links appear in normal case */
.ng-topbar .ng-nav a {
  text-transform: none !important;
  letter-spacing: normal !important; /* remove extra spacing Dawn adds */
  font-weight: 400 !important;       /* adjust if you want lighter */
}
/* Make all header nav links look the same */
.header__inline-menu a,
.header__icon a {
  text-transform: none !important;   /* no forced uppercase */
  letter-spacing: normal !important; /* remove extra spacing */
  font-weight: 400 !important;       /* match MENU weight */
  /*font-size: 14px !important;*/      /* adjust to match MENU exactly */
}
/* Force Search, Menu, Bag to look identical */
.header__inline-menu a,
.header__icon a,
.header__menu-item {
  font-family: inherit !important;
  /*font-size: 14px !important;*/      /* adjust if MENU is bigger/smaller */
  font-weight: 400 !important;     /* match MENU’s weight */
  text-transform: none !important; /* remove uppercase if applied */
  letter-spacing: normal !important; /* remove extra spacing */
  line-height: 1.4 !important;
}
/* === Make SEARCH, MENU, BAG identical === */
.ng-topbar .ng-nav .ng-link,
.ng-topbar .ng-nav .ng-link--btn {
  font-family: inherit !important;
  /*font-size: 14px !important;*/        /* keep if this is your target size */
  font-weight: 400 !important;        /* same weight for all three */
  text-transform: none !important;    /* remove uppercase on MENU button */
  letter-spacing: normal !important;  /* remove extra spacing on MENU */
  line-height: 1.4 !important;
}
/* === Make header logo bigger (force size) === */
.site-header__logo img,
.header__heading-logo-wrapper img {
  max-width: 200px !important; /* increase this value for bigger logo */
  height: auto !important;
}
/* === Bigger logo in the NG topbar === */
.ng-topbar__inner{
  height: 64px !important;            /* taller bar so a taller logo fits */
}

.ng-brand img,
.ng-brand .ng-brand__text{
  height: 48px !important;             /* <-- increase until you’re happy */
  line-height: 40px !important;
  width: auto !important;
}

/* keep the nav buttons the same height as the bar */
.ng-link,
.ng-link--btn{
  height: 64px !important;
}
/* ——— FLOATING (TRANSLUCENT) HEADER ON HOME ONLY ——— */

/* 1) Put the whole header section on top of the page content */
.template-index #shopify-section-header {
  position: fixed;          /* overlay instead of taking layout space */
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;   /* keep the hero visible behind */
  border: 0 !important;
}

/* 2) Keep your custom bar looking the same while it floats */
.template-index .ng-topbar { 
  background: transparent !important; 
  border: 0 !important;
}
.template-index .ng-topbar__inner {
  background: rgba(255,255,255,.92);    /* same translucent look */
  backdrop-filter: saturate(180%) blur(6px);
  border: 1px solid rgba(0,0,0,.12);
}

/* (optional) If you see any jumpy line under the header, hide it on home */
.template-index .header-wrapper--border-bottom { border-bottom-color: transparent !important; }
/* ——— FLOATING HEADER (HOME ONLY) ——— */

/* Put the header section on top of the hero and keep Dawn's wrapper transparent */
.template-index #shopify-section-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border: 0 !important;
}

/* Your custom bar stays the same look while floating */
.template-index .ng-topbar { background: transparent !important; border: 0 !important; }

/* Translucent inner bar (like NattyGarb). Same shape/dividers you already have. */
.template-index .ng-topbar__inner {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(6px);
  border: 1px solid rgba(0,0,0,.12);
}

/* When scrolled a bit, make it very slightly more solid + tiny shadow */
.template-index .ng-topbar.is-solid .ng-topbar__inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Remove any theme border under the header on the home page */
.template-index .header-wrapper--border-bottom { border-bottom-color: transparent !important; }

/* If an announcement bar is present ABOVE the header, push the header down to clear it */
.template-index #shopify-section-announcement-bar ~ #shopify-section-header {
  top: var(--ng-annc-height, 0px);
}
/* Home hero should start at the very top, under the floating header */
.template-index #MainContent{ margin-top:0 !important; padding-top:0 !important; }
.template-index #MainContent > section:first-child{ margin-top:0 !important; }
.template-index #MainContent > section:first-child .banner{ padding-top:0 !important; }
.template-index .has-site-header-transparent{ margin-top:0 !important; }
/* HOME: overlap header on top of the first section (no gap) */
.template-index #shopify-section-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border: 0 !important;
}

/* remove any top spacing Dawn adds */
.template-index main#MainContent{ margin-top:0 !important; padding-top:0 !important; }
.template-index main#MainContent > .shopify-section:first-child{ margin-top:0 !important; }

/* kill padding that the theme/JS adds on the first banner/slideshow */
.template-index main#MainContent > .shopify-section:first-child .banner,
.template-index main#MainContent > .shopify-section:first-child .slideshow,
.template-index main#MainContent > .shopify-section:first-child .banner__media{
  padding-top:0 !important;
}
/* ==== HOME: make header float and let first section sit at the very top ==== */

/* 1) Put the header ON TOP of the page (not in the flow) */
.template-index .shopify-section-header-sticky,
.template-index #shopify-section-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border: 0 !important;
}

/* 2) Remove any gap before the first section on the homepage */
.template-index main#MainContent { margin-top: 0 !important; padding-top: 0 !important; }
.template-index main#MainContent > .shopify-section:first-child { margin-top: 0 !important; }

/* These catch both slideshow & banner sections (Dawn uses either) */
.template-index main#MainContent > .shopify-section:first-child .banner,
.template-index main#MainContent > .shopify-section:first-child .slideshow,
.template-index main#MainContent > .shopify-section:first-child .banner__media {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If the header wrapper tries to draw a bottom line, hide it on home */
.template-index .header-wrapper--border-bottom { border-bottom-color: transparent !important; }
/* Move header slightly below the very top of the screen */
.template-index .shopify-section-header-sticky,
.template-index #shopify-section-header {
  top: 0.2cm !important;   /* shifts header down a bit */
}

/* Make sure the first banner still starts at the top edge */
.template-index main#MainContent,
.template-index main#MainContent > .shopify-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media screen and (max-width: 749px) {
  .image-banner__media,
  .image-banner__media img {
    height: 100vh !important;   /* full mobile viewport height */
  }
}
/* ===== Mobile: make Image banner same height as old Slideshow ===== */
@media (max-width: 749px){
  /* tune these if your header bar is a different size */
  :root {
    --ng-header-h: 64px;   /* header bar height */
    --ng-header-gap: 0.2cm;/* the gap you added above the header */
  }

  /* Make the banner fill the mobile viewport like slideshow used to */
  .template-index .image-banner,
  .template-index .banner {
    /* Over-draw by header height + gap so the visible portion = 100vh */
    min-height: calc(100svh + var(--ng-header-h) + var(--ng-header-gap)) !important;
  }

  .template-index .image-banner .banner__media,
  .template-index .image-banner .banner__media img,
  .template-index .banner .banner__media,
  .template-index .banner .banner__media img{
    height: calc(100svh + var(--ng-header-h) + var(--ng-header-gap)) !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }

  /* kill any internal padding that can steal height */
  .template-index .image-banner .banner__content,
  .template-index .banner .banner__content{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media screen and (max-width: 749px) {
  .image-banner__media,
  .image-banner__media img {
    height: 100vh !important;   /* full mobile viewport height */
  }
}
/* ====== NG HEADER – LAYOUT ====== */
.ng-topbar--desktop,
.ng-topbar--mobile { width: 100%; }

.ng-topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | logo | right */
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

/* Desktop vs Mobile visibility */
.ng-topbar--desktop { display: none; }
.ng-topbar--mobile { display: block; }

@media screen and (min-width: 990px) {
  .ng-topbar--desktop { display: block; }
  .ng-topbar--mobile { display: none; }
}

/* Rails */
.ng-left,
.ng-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ng-right { justify-content: flex-end; }

/* Logo */
.ng-brand img { max-height: 46px; height: auto; display: block; }
.ng-brand__text { font-weight: 700; letter-spacing: .08em; }

/* Buttons / Chips look (like screenshot) */
.ng-link,
.ng-annc {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1;
  padding: 12px 14px;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,.14);
  color: inherit;
  background: #f5f5f5;
}

.ng-link:hover { filter: brightness(0.97); }

/* Kill Dawn's fullscreen search modal */
@media (min-width: 990px){
  #header-search { display: none !important; }
}

/* hidden by default */
.ng-searchbar { display: none; }

/* when body has .ng-search-open we show it */
body.ng-search-open .ng-searchbar {
  display: block;
}

/* look & feel */
.ng-searchbar {
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.14); /* default */
  background: transparent;
}

/* over hero: white divider; after hero: darker divider (matches your header) */
body.template-index[data-ng-state="over-hero"] .ng-searchbar {
  border-top-color: rgba(255,255,255,.75);
}
body.template-index[data-ng-state="after-hero"] .ng-searchbar {
  border-top-color: rgba(0,0,0,.14);
}

/* form layout */
.ng-searchbar__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0; /* it sits inside page-width already */
}

/* input adopts header typography/colors */
.ng-searchbar input[type="search"] {
  flex: 1;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;           /* Poppins + size set by your header rules */
}

/* buttons look like header icons (no boxes) */
.ng-searchbar__submit,
.ng-searchbar__close {
  height: 40px;
  min-width: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* small × looks neat */
.ng-searchbar__close { font-size: 20px; }

/* mobile: show the same inline bar (optional). Remove if you prefer modal on mobile */
@media (max-width: 989px){
  body.ng-search-open .ng-searchbar { display: block; }
  .ng-searchbar { border-top-color: rgba(0,0,0,.14); }
}
/* Desktop bar uses a 3-column grid: left | logo center | right */
@media (min-width: 990px){
  .ng-topbar--desktop { position: relative; } /* so the search dropdown can anchor to it */

  .ng-topbar--desktop .ng-topbar__inner{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;  /* left | logo | right */
    align-items: center;
    gap: 12px;
    height: 64px;                         /* your desired bar height */
    padding: 0 16px;
    box-shadow: none;
  }

  .desktop-left  { justify-self: start;  display:flex; align-items:center; gap: 16px; }
  .desktop-center{ justify-self: center; }
  .desktop-right { justify-self: end;    display:flex; align-items:center; gap: 16px; }
}
/* hidden by default */
.ng-searchbar{ display:none; }

/* show when body has the toggle class */
body.ng-search-open .ng-searchbar{ display:block; }

@media (min-width: 990px){
  .ng-searchbar{
    position: absolute;      /* anchors to .ng-topbar--desktop */
    left: 0; right: 0; top: 100%;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.14);
    border-bottom: 1px solid rgba(0,0,0,.14);
    z-index: 60;
    padding: 10px 0;
  }
  .ng-searchbar__form{
    display:flex; align-items:center; gap:8px;
  }
  .ng-searchbar input[type="search"]{
    flex:1; height: 44px;
    border: none; outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
  }
  .ng-searchbar__submit,
  .ng-searchbar__close{
    min-width:44px; height:44px;
    border:0; background:transparent; cursor:pointer;
  }
}

/* Make sure Dawn’s big modal search stays off */
@media (min-width: 990px){
  #header-search { display: none !important; }
}

/* === Fix desktop header alignment === */
@media (min-width: 990px){
  /* Make the inner container host multiple rows (grid row + optional search row) */
  .ng-topbar--desktop .ng-topbar__inner{
    display: block !important;      /* not flex; lets children size normally */
  }

  /* The 3-column row should span full width and be a grid */
  .ng-topbar--desktop .desktop-header-grid{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;  /* left | logo | right */
    align-items: center !important;
    width: 100% !important;                           /* stretch to page width */
  }

  /* Left rail = left, Right rail = right, Logo = centered */
  .ng-topbar--desktop .desktop-left{
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px;
  }
  .ng-topbar--desktop .desktop-center{
    justify-self: center !important;
  }
  .ng-topbar--desktop .desktop-right{
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px;
  }
}

/* Search + Close button icons */
.ng-searchbar__submit svg,
.ng-searchbar__close svg {
  width: 17px;
  height: 17px;
  display: inline-block;
  vertical-align: middle;
}

/* Ensure buttons don't shrink or distort icons */
.ng-searchbar__submit,
.ng-searchbar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* optional: button padding box */
  height: 34px;  /* optional: makes them square clickable areas */
}

.ng-ps__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  z-index: 50;
}

.ng-ps__panel.active {
  display: block;
}

.ng-ps__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ng-ps__panel li {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}

.ng-ps__panel li a {
  text-decoration: none;
  color: #333;
  display: block;
}

.ng-searchbar__submit .icon,
.ng-searchbar__close .icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
}

#predictive-search-results {
  max-height: none !important;
  overflow: visible !important;
}

.predictive-search__results-list {
  max-height: none !important;
  overflow: visible !important;
}

/* The inline search wrapper */
.ng-searchbar { position: relative; }

/* The container you render results into: #ng-predictive-results */
#ng-predictive-results{
  position: absolute;        /* sit under the input */
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;               /* above the header */
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);

  /* SCROLLING */
  max-height: min(70vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep the list itself from stretching the page */
#ng-predictive-results .predictive-search__results-list{
  max-height: none;          /* let the panel control height */
  overflow: visible;
}

/* SEE ALL RESULTS → button style */
.predictive-search__see-all,
.ng-ps__see-all {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid #000;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 15px;          /* bump as needed */
  color: #000 !important;
  background: #fff;
  width: 100%;              /* full width footer button */
  border-radius: 4px;
}
.predictive-search__see-all:hover,
.ng-ps__see-all:hover { opacity: .85; text-decoration: none; }

/* === Desktop: reliable left-rail dividers on all pages (except Home) === */
@media (min-width: 990px){

  /* Handle either container name your theme may use */
  body:not(.template-index) .ng-topbar--desktop .desktop-left > *,
  body:not(.template-index) .ng-topbar--desktop .ng-left > *{
    border-left: 0 !important;               /* reset any theme/button borders */
  }

  /* Add a single hairline to every item that has a previous sibling
     → guarantees a line between COD (1st) and MENU (2nd) */
  body:not(.template-index) .ng-topbar--desktop .desktop-left > * + *,
  body:not(.template-index) .ng-topbar--desktop .ng-left        > * + *{
    border-left: 1px solid rgba(0,0,0,.16) !important;
  }
}

@media (min-width: 990px) { /* desktop only */
  body.ng-scrolled .banner--grey-on-scroll .banner__media {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
  }

  /* back to normal when at top */
  body:not(.ng-scrolled) .banner--grey-on-scroll .banner__media {
    filter: none;
  }
}

/* ===== NG MENU (desktop hover + mobile drawer) ===== */

/* wrapper lets us show on hover (desktop) */
.ng-menu-container{ position: relative; }

/* panel base */
.ng-menu{
  --menu-bg: #fff;
  --menu-border: rgba(0,0,0,.12);
  --menu-shadow: 0 18px 40px rgba(0,0,0,.12);

  /* hidden by default (desktop), JS toggles for mobile */
  display: block;
}

/* Inner box (shared) */
.ng-menu__inner{
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  box-shadow: var(--menu-shadow);
}

/* Desktop layout */
@media (min-width: 990px){
  /* anchor the panel under the topbar; full-width “megamenu” feel */
  .ng-menu{
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 60;
    pointer-events: none;               /* prevent hover flicker */
  }
  .ng-menu__inner{
    pointer-events: auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: 2fr 1fr;     /* main + side column */
    gap: 32px;
  }
  .ng-menu__col--side{ border-left: 1px solid var(--menu-border); padding-left: 24px; }

  /* show only when hovering the wrapper (trigger or panel) */
  .ng-menu-container:hover .ng-menu{
    visibility: visible;
  }
  .ng-menu:not(.force-open){ 
    visibility: hidden;
  }

  .ng-menu__list{ list-style: none; margin: 0; padding: 0; }
  .ng-menu__list li{ margin: 0 0 14px; }
  .ng-menu__list a{
    text-decoration: none;
    color: #111;
    font-size: 14px;
    letter-spacing: .02em;
  }
  .ng-menu__list a:hover{ text-decoration: underline; }

  /* desktop doesn’t need overlay */
  .ng-menu__overlay{ display: none; }
}

/* Mobile drawer (right slide-in) */
@media (max-width: 989px){
  .ng-menu{
    position: fixed;
    inset: 0 0 0 auto;   /* right side */
    width: min(88vw, 420px);
    background: var(--menu-bg);
    border-left: 1px solid var(--menu-border);
    transform: translateX(100%);
    transition: transform .28s ease-out;
    z-index: 100;        /* above header */
  }
  .ng-menu.is-open{ transform: translateX(0); }
  .ng-menu[hidden]{ display: block; } /* keep element for sliding; hidden only for a11y */

  .ng-menu__inner{
    height: 100%;
    overflow: auto;
    padding: 22px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* two columns per your mock */
    gap: 18px;
  }
  .ng-menu__list{ list-style: none; margin: 0; padding: 0; }
  .ng-menu__list li{ margin: 0 0 14px; }
  .ng-menu__list a{
    text-decoration: none;
    color: #111;
    font-size: 15px;
  }

  /* overlay behind drawer */
  .ng-menu__overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    border: 0;
    margin: 0; padding: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease-out;
  }
  .ng-menu.is-open + .ng-menu__overlay,
  .ng-menu.is-open .ng-menu__overlay{
    opacity: 1; pointer-events: auto;
  }

  /* make sure our wrapper doesn’t show hover panel logic on mobile */
  .ng-menu-container:hover .ng-menu{ visibility: visible; } /* harmless on mobile */
}

/* Utility: lock body scroll when drawer open */
body.ng-menu-open{ overflow: hidden; }

/* Trigger label visual (optional) */
.ng-menu-trigger{ position: relative; }

/* ==== Uniform product image frames on grid/list ==== */
:root{
  /* change this ratio if you prefer square (1/1) or landscape (4/3) */
  --prod-ratio: 3 / 4; /* portrait like your shots */
}

/* Frame that holds the image */
.grid .card__media,
.product-grid .card__media,
.card-wrapper .card__inner,
.card__media {
  aspect-ratio: var(--prod-ratio);
  width: 100%;
  overflow: hidden;
  display: block;
}

/* Make the image fill the frame neatly */
.grid .card__media img,
.product-grid .card__media img,
.card__media img,
.card-wrapper .card__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* If your theme adds extra padding-bottom on .card__inner, cancel it */
.card-wrapper .card__inner { padding-bottom: 0 !important; }

/* --- Uniform product card image frame --- */
/* Choose ONE aspect ratio: 3/4 (portrait) OR 1/1 (square). 3/4 is common for fashion. */

.card--product .ng-card-media{
  position: relative;
  /* Portrait crop: */
  aspect-ratio: 3 / 4;
  /* If you prefer square instead, comment the line above and use: */
  /* aspect-ratio: 1 / 1; */

  /* Make sure no theme padding hacks are applied */
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;        /* hide overflow so images crop cleanly */
}

/* Make both primary and hover images fill the frame */
.card--product .ng-card-media > img,
.card--product .ng-card-media .ng-card-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* core: fills uniformly */
  object-position: center; /* keeps the model centered; respects Shopify focal point */
  display: block;
}

/* Dawn sometimes sets a min-height/ratio on .media—neutralize it */
.card--product .media--transparent{ background: transparent !important; }
.card--product .media{ min-height: 0 !important; }

.menu-banner-wrapper {
  padding: 1rem;
  text-align: center;
}
.menu-banner-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =======================
   QUICK VIEW — Card "+" button
   ======================= */
.ng-card__quick{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  background: #000;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .15s ease, opacity .15s ease;
  z-index: 2;
}
.card__inner:hover .ng-card__quick{ transform: scale(1.03); }
.ng-card__quick:focus{ outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }

/* Ensure button positions relative to card */
.card__inner { position: relative; }

/* Keep header below the drawer but above page content */
#shopify-section-header,
.header-wrapper { z-index: 50 !important; }

/* =======================
   SIZE CHART — compact right-edge panel
   ======================= */
:root { --ng-sizechart-offset: 84px; } /* match your sticky header height */

.ng-sizechart__drawer { position: relative; }
.ng-sizechart__drawer.is-open .ng-sizechart__overlay { opacity: 1; pointer-events: auto; }
.ng-sizechart__drawer.is-open .ng-sizechart__panel { transform: translateX(0); }

/* overlay behind the chart (per product) */
.ng-sizechart__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 5100; /* under the panel, over page */
}

/* the chart panel */
.ng-sizechart__panel{
  position: fixed;
  right: 0;
  top: var(--ng-sizechart-offset, 84px);
  width: 420px;
  max-width: 92vw;
  height: auto;
  max-height: calc(70vh - 10px);
  background: #0d0e0f;
  color: #f6f6f6;
  border-radius: 10px 0 0 10px;
  box-shadow: -10px 0 28px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .32s ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 14px;
  z-index: 5200; /* above quick-view */
  outline: none;
}

/* size chart title + close */
.ng-sizechart__title{
  margin: 2px 28px 10px 2px;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
}
.ng-sizechart__close{
  position: absolute;
  top: 8px; right: 10px;
  color: #bbb; font-weight: 600; font-size: 20px;
  border: 0; background: transparent; cursor: pointer; line-height: 1;
}
.ng-sizechart__close:hover{ color:#fff; }

/* compact dark table */
.ng-sizechart__table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #101214;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  margin: 6px 0 0;
}
.ng-sizechart__table thead th{
  background: #121418; color: #eaeaea; font-size: 11.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 8px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ng-sizechart__table td{
  color: #f5f5f5; padding: 10px 8px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ng-sizechart__table td:first-child,
.ng-sizechart__table th:first-child{
  text-align: left; padding-left: 12px; font-weight: 600;
}
.ng-sizechart__table tbody tr:hover td{ background: rgba(255,255,255,.03); }

/* Make sure chart stays above quick-view and header */
.quick-options-drawer .ng-sizechart__overlay{ z-index: 5100; }
.quick-options-drawer .ng-sizechart__panel{   z-index: 5200; }

/* =======================
   QUICK VIEW — Drawer (single source of truth)
   ======================= */

.quick-options-drawer{
  position: fixed;
  inset: 0;                 /* full viewport */
  z-index: 5000;            /* below close button, above page */
  pointer-events: none;
}
.quick-options-drawer.open{ pointer-events: auto; }

/* FULL-SCREEN dimmer that always covers the page */
.quick-options-drawer-overlay{
  position: fixed;          /* not absolute */
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease;
  z-index: 4999;            /* under the drawer panel */
}
.quick-options-drawer.open .quick-options-drawer-overlay{
  opacity: 1;
  visibility: visible;
}

.quick-options-drawer-inner{
  position: fixed; top: 0; right: 0;
  height: 100vh;
  width: min(600px, 100vw);
  background: #fff;
  box-shadow: -14px 0 36px rgba(0,0,0,.28);
  transform: translateX(100%);
  transition: transform .30s ease-in-out;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 5001;            /* above overlay */
}
.quick-options-drawer.open .quick-options-drawer-inner{ transform: translateX(0); }

/* Make website full-width on large screens */
.page-width {
  max-width: 100% !important;
  padding-left: 0;  /* adjust side padding as needed */
  padding-right: 0;
}

/* Optional: adjust header/footer if they also feel boxed */
.header, .footer {
  max-width: 100% !important;
}

/* --- Featured Collection title: bold uppercase --- */
.collection .title-wrapper-with-link > .title,
.collection .title-wrapper-with-link > h2.title,
.collection .title-wrapper-with-link > h2.title.inline-richtext {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;

  font-size: clamp(22px, 2vw + 12px, 32px) !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.collection .title-wrapper-with-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Default: first banner images full color */
#shopify-section-template--19059876004039__image_banner_QfL9HT img {
  filter: none !important;
  -webkit-filter: none !important;
  transition: filter 0.4s ease;
}

/* When scrolled: first banner images turn grey */
#shopify-section-template--19059876004039__image_banner_QfL9HT.scrolled img {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}

/* Add black stroke around banner headings */
.banner__heading {
  -webkit-text-stroke: 3px #000; /* thin black outline */
  text-stroke: 3px #000;         /* fallback */
  paint-order: stroke fill;      /* make stroke appear behind fill */
}

/* Optional: also apply to subline if needed */
.banner__text {
  -webkit-text-stroke: 0.5px #000;
  text-stroke: 0.5px #000;
  paint-order: stroke fill;
}

/* --- Reset: keep ALL banners full color by default --- */
.banner,
.banner__media,
.image-banner,
.image-with-text__media,
.slideshow__image,
.multicolumn-card__image-wrapper {
  filter: none !important;
}
.banner img,
.banner__media img,
.image-banner img,
.image-with-text__media img,
.slideshow__image img,
.multicolumn-card__image-wrapper img {
  filter: none !important;
  -webkit-filter: none !important;
  transition: filter .35s ease;
}

/* --- Only the marked section should turn grey when scrolled --- */
.ng-grey-on-scroll.is-grey,
.ng-grey-on-scroll.is-grey .banner__media,
.ng-grey-on-scroll.is-grey .banner__media img {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}

/* ✅ Mobile-only: clean header buttons with separators */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid #000 !important; /* thin bottom border like NG */
    height: 48px !important;
    padding: 0 10px !important;
  }

  /* Logo stays left */
  .ng-topbar--mobile .ng-brand {
    flex: 0 0 auto !important;
  }

  /* Nav actions (Search, Menu, Bag) in one row */
  .ng-topbar--mobile .ng-nav,
  .ng-topbar--mobile .header__icons {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Buttons look like plain text, uppercase, black separators */
  .ng-topbar--mobile .ng-nav .ng-link,
  .ng-topbar--mobile .header__icons a {
    background: none !important;
    border: none !important;
    padding: 0 14px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #000 !important;
  }

  /* Add vertical separators */
  .ng-topbar--mobile .ng-nav .ng-link + .ng-link,
  .ng-topbar--mobile .header__icons a {
    border-left: 1px solid #000 !important;
  }
}
/* ✅ Mobile-only: add separator before SEARCH */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-nav .ng-link:first-child {
    border-left: 1px solid #000 !important;
  }
}

/* ✅ Mobile-only: thin black border around header */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    border: 1px solid #000 !important;
  }
}

/* ✅ Mobile-only: bigger logo */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-brand img,
  .ng-topbar--mobile .ng-brand .ng-brand__text {
    height: 44px !important;   /* increase height */
    width: auto !important;
  }
}

/* ✅ Mobile-only: inset header with left/right spacing */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    margin-left: 0.2cm !important;
    margin-right: 0.2cm !important;
    width: auto !important;   /* prevent forced 100% stretch */
  }
}

/* ✅ Mobile-only: increase header height by 0.2cm (~8px) */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    height: 56px !important;  /* was ~48px */
  }

  /* Make sure logo & buttons stay centered vertically */
  .ng-topbar--mobile .ng-brand img,
  .ng-topbar--mobile .ng-brand .ng-brand__text,
  .ng-topbar--mobile .ng-nav .ng-link,
  .ng-topbar--mobile .header__icons a {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ✅ Mobile-only: increase header height by 0.2cm (~8px) */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    height: 56px !important;  /* was ~48px */
  }

  /* Make sure logo & buttons stay centered vertically */
  .ng-topbar--mobile .ng-brand img,
  .ng-topbar--mobile .ng-brand .ng-brand__text,
  .ng-topbar--mobile .ng-nav .ng-link,
  .ng-topbar--mobile .header__icons a {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ✅ Mobile-only: make separators full header height */
@media (max-width: 989px) {
  .ng-topbar--mobile .ng-nav .ng-link::before,
  .ng-topbar--mobile .ng-nav .ng-link--btn::before {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;  /* stretch full bar height */
  }

  /* also ensure the first SEARCH separator is full height */
  .ng-topbar--mobile .ng-nav .ng-link:first-child::before,
  .ng-topbar--mobile .ng-nav .ng-link--btn:first-child::before {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }
}

/* ✅ Mobile-only: full-height black separators between header buttons */
@media (max-width: 989px) {
  /* Turn OFF all existing left borders */
  .ng-topbar--mobile .ng-nav .ng-link,
  .ng-topbar--mobile .ng-nav .ng-link--btn,
  .ng-topbar--mobile .header__icons a {
    border-left: none !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Add a vertical line on the RIGHT side of each item */
  .ng-topbar--mobile .ng-nav .ng-link::after,
  .ng-topbar--mobile .ng-nav .ng-link--btn::after,
  .ng-topbar--mobile .header__icons a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;       /* ensures full height */
    right: 0 !important;
    width: 1px !important;
    background: #000 !important;
  }

  /* Don’t draw on the very last button (Bag) */
  .ng-topbar--mobile .header__icons a:last-child::after {
    display: none !important;
  }
}

@media (max-width: 989px) {
  .ng-topbar--mobile .ng-topbar__inner {
    align-items: stretch !important; /* make children stretch full height */
  }
}

/* ✅ Mobile-only: kill ALL old separators, add ONE clean system */
@media (max-width: 989px) {
  /* 1) Hard reset borders + any old pseudo lines */
  .ng-topbar--mobile .ng-nav .ng-link,
  .ng-topbar--mobile .ng-nav .ng-link--btn,
  .ng-topbar--mobile .header__icons a {
    border: 0 !important;
  }
  .ng-topbar--mobile .ng-nav .ng-link::before,
  .ng-topbar--mobile .ng-nav .ng-link::after,
  .ng-topbar--mobile .ng-nav .ng-link--btn::before,
  .ng-topbar--mobile .ng-nav .ng-link--btn::after,
  .ng-topbar--mobile .header__icons a::before,
  .ng-topbar--mobile .header__icons a::after {
    content: none !important;
  }

  /* 2) Single separator: add to every item that follows another */
  .ng-topbar--mobile .ng-nav > * + *,
  .ng-topbar--mobile .header__icons > * + * {
    position: relative !important;
  }
  .ng-topbar--mobile .ng-nav > * + *::before,
  .ng-topbar--mobile .header__icons > * + *::before {
    content: "" !important;
    position: absolute !important;
    left: 0; top: 0; bottom: 0;         /* full height of the header */
    width: 1px;
    background: #000 !important;
  }
}

@media (max-width: 989px){
  #header-search {
    display: block !important;
  }
}

/* Kill the default marker/bullet on the mobile search summary */
@media (max-width: 989px){
  #header-search summary::-webkit-details-marker { display: none; }
  #header-search summary::marker { content: ""; display: none; }
}

/* --- Fix the white dot from search summary on mobile --- */
#header-search summary {
  list-style: none;           /* removes default bullet */
  appearance: none;           /* reset native styling */
  -webkit-appearance: none;
}

#header-search summary::-webkit-details-marker {
  display: none !important;   /* Safari/Chrome */
}

#header-search summary::marker {
  content: "" !important;     /* Firefox */
}

/* ================================
   MOBILE SEARCH BAR FIX
   ================================ */
@media (max-width: 989px) {
  /* Kill the white dot / marker */
  #header-search summary {
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  #header-search summary::-webkit-details-marker,
  #header-search summary::marker {
    display: none !important;
    content: "" !important;
  }

  /* Ensure modal opens full width */
  #header-search .search-modal {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    background: #fff;                 /* clean white background */
    z-index: 9999;                     /* above everything */
    display: flex;
    flex-direction: column;
  }

  /* Center input nicely */
  #header-search .search__input {
    width: 100%;
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 20px auto;
    display: block;
  }

  /* Submit (magnifier) button */
  #header-search .search__button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
  }

  /* Close (X) button */
  #header-search .search-modal__close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    padding: 8px;
    z-index: 10000;
  }

  /* Predictive search results container */
  .predictive-search.predictive-search--header {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

/* Hide Dawn's default search summary on mobile */
@media (max-width: 989px) {
  #header-search summary {
    display: none !important;
  }
}

/* Home "BLOG POSTS" => match the DRESSES heading */
.template-index .blog .title-wrapper-with-link > h2.blog__title {
  font-family: "Arial Black","Helvetica Neue",Arial,Helvetica,sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  color: #2B2B2B !important;
  text-transform: uppercase !important;
}

/* mobile scale */
@media (max-width: 749.98px){
  .template-index .blog .title-wrapper-with-link > h2.blog__title {
    font-size: 24px !important;
  }
}

/* (optional) nudge Dawn’s heading variables inside the blog section */
.template-index .blog {
  --font-heading-family: "Arial Black","Helvetica Neue",Arial,Helvetica,sans-serif !important;
  --font-heading-weight: 900 !important;
}

/* === FINAL DESKTOP HOMEPAGE OVERRIDES (place at very bottom) === */

/* A) Home only: float the whole header on top of the hero */
@media (min-width: 990px){
  .template-index #shopify-section-header{
    position: fixed !important;
    top: 0 !important; left: 0; right: 0;
    z-index: 60;
    background: transparent !important;
    border: 0 !important;
  }
  .template-index .header-wrapper--border-bottom{
    border-bottom-color: transparent !important;
  }
  .template-index main#MainContent{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* B) Desktop topbar: logo left, links right (one clean row) */
@media (min-width: 990px){
  .ng-topbar--desktop{ display:block !important; }
  .ng-topbar--mobile{ display:none !important; }

  .ng-topbar--desktop .ng-topbar__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    padding: 0 20px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: saturate(180%) blur(6px);
    border: 1px solid rgba(0,0,0,.12) !important;
    gap: 16px !important;
  }
  .ng-topbar--desktop .ng-brand{ margin-right: auto !important; }
  .ng-topbar--desktop .ng-left{ display:flex !important; align-items:center !important; gap:16px !important; }
  .ng-topbar--desktop .ng-right{ display:flex !important; align-items:center !important; gap:16px !important; margin-left:auto !important; }

  /* Hide Dawn hamburger ONLY on desktop */
  .header__icon--menu, summary#header-menu{ display:none !important; }
}

/* C) Undo the rule that made the whole site full-width on large screens
      (delete your earlier full-width block if you prefer; this restores Dawn’s container) */
@media (min-width: 990px){
  .page-width{
    max-width: var(--page-width) !important;
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}

/* D) Neutralize stray/conflicting declarations safely */
.ng-topbar--desktop .desktop-header-grid{ display: contents !important; } /* if that wrapper exists, it stops breaking layout */
#site-header{ all: unset; } /* selector doesn’t exist in Dawn; keep it from interfering */


/* ✅ Center-align pricing only on homepage + collections (mobile only) */
@media (max-width: 767px) {
  /* Homepage featured products & collections grid */
  .collection .price,
  .collection-grid .price,
  .index-section .price,
  .card .price {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }

  /* ❌ Exclude product detail page and quick-view */
  .product-single .price,
  .product__info-wrapper .price,
  .quick-view .price,
  .modal .price {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
  }
}

/* Make size chart titles white */
.ng-sz__title {
  color: #fff !important;   /* white text */
}

/* ——— Force iPad/tablets to use the MOBILE banner/layout ——— */
/* Cover iPads (768–1024), iPad Pro landscape (1366), and similar tablets */
@media screen and (max-width: 1200px) {
  /* If your section outputs separate mobile/desktop media, flip them */
  .banner__media--mobile,
  .image-banner .banner__media--mobile {
    display: block !important;
  }
  .banner__media--desktop,
  .image-banner .banner__media--desktop {
    display: none !important;
  }

  /* Some Dawn variants use “small/medium/large” flags instead of mobile/desktop */
  .banner__media[data-view="mobile"] { display: block !important; }
  .banner__media[data-view="desktop"] { display: none !important; }

  /* Make sure object fit/crop matches your phone look */
  .banner__media img,
  .banner__media video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Safety: if your theme switches at 750/990, ensure nothing reverts it back above 1200 */
@media screen and (min-width: 1201px) {
  .banner__media--mobile,
  .image-banner .banner__media--mobile { display: none !important; }
  .banner__media--desktop,
  .image-banner .banner__media--desktop { display: block !important; }
}

/* Tablet = Mobile (layout + cropping) */
@media screen and (min-width: 750px) and (max-width: 1200px) {
  /* keep mobile gutters on tablet */
  .page-width { padding: 0 1.5rem !important; }

  /* make hero fill viewport like on phones */
  .template-index .image-banner,
  .template-index .banner {
    min-height: calc(100svh + var(--ng-header-h) + var(--ng-header-gap)) !important;
  }
  .template-index .image-banner .banner__media,
  .template-index .image-banner .banner__media img,
  .template-index .banner .banner__media,
  .template-index .banner .banner__media img {
    height: calc(100svh + var(--ng-header-h) + var(--ng-header-gap)) !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* (keeps your mobile rules for phones — we’re just adding a 750–1200px band)
   Your existing mobile-only block lives near here: */