/** Shopify CDN: Minification failed

Line 9008:27 Expected ")" to end URL token
Line 9035:0 Unexpected "<"
Line 9070:0 Unexpected "<"
Line 9237:1 Expected "}" to go with "{"

**/
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

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

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

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

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

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

/* base */

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

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

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

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

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

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

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

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

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

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

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

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

.isolate {
  position: relative;
  z-index: 0;
}

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

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

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

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

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

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

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

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

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

.hidden {
  display: none !important;
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 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);
}

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

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

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

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

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

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

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

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

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

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

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

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

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

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

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

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

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

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

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

.visibility-hidden {
  visibility: hidden;
}

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

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext 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);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

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

.placeholder-svg {
  height: 100%;
  width: 100%;
}

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

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

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

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

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

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

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

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

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

deferred-media {
  display: block;
}

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

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__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__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

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

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

/* Button - social share */

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

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

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

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;
  min-width: 1.3rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

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

/* Field */

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

.customer .field {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

/* Text area */

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

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

/* Form global */

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

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

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

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

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

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

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

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

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

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

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

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

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

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

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

/* utility-bar */
.utility-bar {
  height: 100%;
}

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

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

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

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

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

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

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* 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-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .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.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

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

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

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

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

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

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

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

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

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

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

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

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

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

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

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

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

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

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

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

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

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

  .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;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.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 .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

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

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

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

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

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

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

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

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

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

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

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

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

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

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

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

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

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

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

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

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

.search-modal__form {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

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

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

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

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

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}





/* === KAMI MODE Password Page Background Video === */
#km-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: #000;
  filter: brightness(0.85) contrast(1.2) saturate(1.25);
}

#km-bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
  z-index: -1;
}

.password-header,
.password,
.password__container,
.password__form {
  position: relative;
  z-index: 2;
  color: #fff;
}




/* === KAMI MODE — Hyper Glitch Text === */
.kami-logo-text{
  /* sizing + base look */
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .04em;
  color: #fff;
  position: relative;
  display: inline-block;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* glow */
  text-shadow:
    0 0 6px rgba(0,255,249,.55),
    0 0 14px rgba(255,0,100,.35);

  /* tweakable variables */
  --gl1: #00fff0;      /* cyan ghost */
  --gl2: #ff004f;      /* magenta ghost */
  --duration: 1.8s;    /* overall tempo */
  --jitter: 2px;       /* horizontal/vertical jitter */
  --skew: .6deg;       /* skew amount */
}

/* chromatic ghosts */
.kami-logo-text::before,
.kami-logo-text::after{
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  clip-path: inset(0 0 0 0);
}

.kami-logo-text::before{
  color: var(--gl1);
  text-shadow: 0 0 6px rgba(0,255,249,.7), 0 0 16px rgba(0,255,249,.35);
  animation:
    glitch-shift var(--duration) steps(24,end) infinite,
    glitch-clip  var(--duration) steps(20,end) infinite;
}

.kami-logo-text::after{
  color: var(--gl2);
  text-shadow: 0 0 6px rgba(255,0,79,.7), 0 0 16px rgba(255,0,79,.35);
  animation:
    glitch-shift-2 calc(var(--duration)*.92) steps(26,end) infinite,
    glitch-clip-2  calc(var(--duration)*.88) steps(24,end) infinite;
}

/* subtle overall flicker */
.kami-logo-text{
  animation: glitch-flicker 3.7s steps(60,end) infinite;
}

/* Intensify on hover (optional) */
.kami-logo-text:hover{
  --jitter: 3px;
  --skew: .8deg;
  filter: drop-shadow(0 0 18px rgba(255,0,90,.35));
}

/* ====== keyframes ====== */
@keyframes glitch-shift{
  0%   { transform: translate(0,0) skew(0); }
  10%  { transform: translate(var(--jitter), calc(var(--jitter)*-1)) skew(var(--skew)); }
  20%  { transform: translate(calc(var(--jitter)*-1), var(--jitter)) skew(calc(var(--skew)*-1)); }
  30%  { transform: translate(0,0) skew(0); }
  45%  { transform: translate(calc(var(--jitter)*.5), calc(var(--jitter)*.6)) skew(var(--skew)); }
  60%  { transform: translate(calc(var(--jitter)*-1.2), calc(var(--jitter)*-.6)); }
  75%  { transform: translate(calc(var(--jitter)*.8), calc(var(--jitter)*-.8)); }
  100% { transform: translate(0,0) skew(0); }
}

@keyframes glitch-shift-2{
  0%   { transform: translate(0,0); }
  12%  { transform: translate(calc(var(--jitter)*-1.2), calc(var(--jitter)*.8)); }
  28%  { transform: translate(calc(var(--jitter)*1.1),  calc(var(--jitter)*-.7)); }
  51%  { transform: translate(calc(var(--jitter)*-.6),  calc(var(--jitter)*.5)); }
  79%  { transform: translate(calc(var(--jitter)*.9), 0); }
  100% { transform: translate(0,0); }
}

/* sliced scanlines (rect-like via clip-path) */
@keyframes glitch-clip{
  0%   { clip-path: inset(0 0 82% 0); }
  5%   { clip-path: inset(10% 0 65% 0); }
  10%  { clip-path: inset(80% 0 2% 0); }
  15%  { clip-path: inset(40% 0 43% 0); }
  20%  { clip-path: inset(0 0 82% 0); }
  30%  { clip-path: inset(52% 0 15% 0); }
  40%  { clip-path: inset(18% 0 58% 0); }
  50%  { clip-path: inset(70% 0 0 0); }
  60%  { clip-path: inset(24% 0 46% 0); }
  70%  { clip-path: inset(0 0 100% 0); }
  80%  { clip-path: inset(60% 0 8% 0); }
  90%  { clip-path: inset(8% 0 60% 0); }
  100% { clip-path: inset(0 0 82% 0); }
}

@keyframes glitch-clip-2{
  0%   { clip-path: inset(70% 0 0 0); }
  8%   { clip-path: inset(0 0 75% 0); }
  18%  { clip-path: inset(62% 0 3% 0); }
  27%  { clip-path: inset(10% 0 60% 0); }
  44%  { clip-path: inset(35% 0 35% 0); }
  58%  { clip-path: inset(0 0 90% 0); }
  72%  { clip-path: inset(85% 0 0 0); }
  86%  { clip-path: inset(20% 0 60% 0); }
  100% { clip-path: inset(70% 0 0 0); }
}

@keyframes glitch-flicker{
  0%,100% { opacity: 1; filter: none; }
  10%     { opacity: .92; filter: saturate(1.2) brightness(1.08); }
  22%     { opacity: .88; }
  25%     { opacity: 1; }
  32%     { opacity: .96; filter: hue-rotate(8deg); }
  60%     { opacity: .93; }
  71%     { opacity: 1; filter: none; }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .kami-logo-text,
  .kami-logo-text::before,
  .kami-logo-text::after{
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}




/* Hide image logo so glitch text is visible */
.header .header__heading-logo { display: none; }

/* === KAMI MODE — Header wordmark glitch (logo text) === */
.kami-logo-text,
.glitch-text {
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #e9ddff;
  text-shadow:
    0 0 6px rgba(187,134,252,.9),
    0 0 22px rgba(255,0,255,.35);
}

/* Two hidden layers used for RGB split */
.kami-logo-text span[aria-hidden="true"],
.glitch-text span[aria-hidden="true"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .75;
  clip-path: inset(0 0 0 0);
}

/* Red/blue channel offsets */
.kami-logo-text span[aria-hidden="true"]:first-child,
.glitch-text     span[aria-hidden="true"]:first-child {
  color: #ff2a6d;
  transform: translate(-1px, 0);
  filter: blur(.3px);
}

.kami-logo-text span[aria-hidden="true"]:last-child,
.glitch-text     span[aria-hidden="true"]:last-child {
  color: #39c5ff;
  transform: translate(1px, 0);
  filter: blur(.3px);
}

/* Main visible layer gets a soft neon aura */
.kami-logo-text .glitch-visible,
.glitch-text     .glitch-visible {
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(187,134,252,.8),
    0 0 24px rgba(255,0,255,.35),
    0 0 40px rgba(255,0,255,.18);
}

/* Micro jitter animation */
@keyframes kamiGlitch {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(.2px, -.2px); }
  40% { transform: translate(-.4px, .3px); }
  60% { transform: translate(.3px, .4px); }
  80% { transform: translate(-.2px, -.3px); }
}

.kami-logo-text,
.kami-logo-text span[aria-hidden="true"],
.glitch-text,
.glitch-text span[aria-hidden="true"] {
  animation: kamiGlitch 1.8s steps(2, end) infinite;
}

/* Respect “reduce motion” */
@media (prefers-reduced-motion: reduce) {
  .kami-logo-text,
  .kami-logo-text span[aria-hidden="true"],
  .glitch-text,
  .glitch-text span[aria-hidden="true"] {
    animation: none !important;
    transform: none !important;
  }
}

/* === KAMI MODE — Luxury VOID Headline === */
.km-hero {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: #fff;
  position: relative;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 0 20px #a900ff, 0 0 40px #ff00cc, 0 0 60px #ff0066;
  animation: neonGlow 2s ease-in-out infinite alternate;
}

.km-hero-line {
  display: block;
  overflow: hidden;
}

.km-hero-line span {
  display: inline-block;
  transform: translateY(100%);
  animation: slideUp 1s forwards;
}

.km-hero-line:nth-child(2) span {
  animation-delay: 0.3s;
}

.km-hero-sub {
  display: block;
  margin-top: 10px;
  font-size: 1rem;
  letter-spacing: 2px;
  opacity: 0.8;
  color: #ccc;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
  }
}

@keyframes neonGlow {
  0% { text-shadow: 0 0 10px #a900ff, 0 0 20px #ff00cc, 0 0 30px #ff0066; }
  100% { text-shadow: 0 0 20px #ff00cc, 0 0 40px #ff0066, 0 0 60px #a900ff; }
}

/* === KAMI MODE — Luxury CTA (hero button) === */
/* Targets the hero button safely without renaming blocks */
.banner__buttons a,
.banner__buttons a[role="link"],
.banner__buttons .button,
.banner__buttons .button--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: #fff;

  /* “Glass” body with neon border */
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(233,0,255,0.55);
  box-shadow:
    0 0 0.5px rgba(255,255,255,0.25) inset,
    0 0 16px rgba(233,0,255,0.20);

  /* Subtle micro-interaction */
  transform: translateZ(0); /* promote layer */
  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Hover/active glow */
.banner__buttons a:hover,
.banner__buttons a[role="link"]:hover,
.banner__buttons .button:hover,
.banner__buttons .button--primary:hover {
  background: rgba(233,0,255,0.06);
  border-color: rgba(233,0,255,0.85);
  box-shadow:
    0 0 1px rgba(255,255,255,0.35) inset,
    0 0 22px rgba(233,0,255,0.35),
    0 0 40px rgba(116,0,255,0.18);
  transform: translateY(-1px) scale(1.01);
}

.banner__buttons a:active,
.banner__buttons a[role="link"]:active,
.banner__buttons .button:active,
.banner__buttons .button--primary:active {
  transform: translateY(0);
}

/* Focus ring for accessibility */
.banner__buttons a:focus-visible,
.banner__buttons .button:focus-visible,
.banner__buttons .button--primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.12),
    0 0 0 6px rgba(233,0,255,0.35);
}

/* Shimmer sweep (lux but subtle) */
.banner__buttons a::after,
.banner__buttons .button::after,
.banner__buttons .button--primary::after {
  content: "";
  position: absolute;
  inset: -2px; /* extend a hair past border for glow continuity */
  border-radius: inherit;
  pointer-events: none;

  /* Narrow angled gradient bar that sweeps across */
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 60%
  );
  transform: translateX(-140%) skewX(-12deg);
  opacity: 0; /* idle: off */
  transition: opacity .25s ease;
}

.banner__buttons a:hover::after,
.banner__buttons .button:hover::after,
.banner__buttons .button--primary:hover::after {
  opacity: .85;
  animation: km-btn-sheen 900ms cubic-bezier(.25,.6,.2,1) forwards;
}

@keyframes km-btn-sheen {
  0%   { transform: translateX(-140%) skewX(-12deg); }
  100% { transform: translateX(140%)  skewX(-12deg); }
}

/* Reduce motion = no sweep */
@media (prefers-reduced-motion: reduce) {
  .banner__buttons a,
  .banner__buttons .button,
  .banner__buttons .button--primary {
    transition: none;
  }
  .banner__buttons a::after,
  .banner__buttons .button::after,
  .banner__buttons .button--primary::after {
    display: none;
  }
}

/* Optional: tighter button group spacing on mobile */
@media (max-width: 600px) {
  .banner__buttons {
    gap: 10px;
  }
}

/* Subtle Neon Glow */
.collection-hero__title,
.collection-banner__title,
.collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ff00ff; /* Neon magenta */
  text-shadow: 
    0 0 2px rgba(255, 0, 255, 0.8),
    0 0 4px rgba(255, 0, 255, 0.5);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .collection-hero__title,
  .collection-banner__title,
  .collection-hero .title {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(255, 0, 255, 0.7),
      0 0 3px rgba(255, 0, 255, 0.4);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .collection-hero__title,
  .collection-banner__title,
  .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(255, 0, 255, 0.6),
      0 0 2px rgba(255, 0, 255, 0.3);
  }
}

/* ==============================
   KAMI MODE COLLECTION HEADERS
   ============================== */

/* Default style (fallback if no specific class is matched) */
.collection-hero__title,
.collection-banner__title,
.collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Void Rebellion (Magenta Glow) */
.template-collection.void-rebellion .collection-hero__title,
.template-collection.void-rebellion .collection-banner__title {
  color: #ff00ff;
  text-shadow:
    0 0 2px rgba(255, 0, 255, 0.8),
    0 0 4px rgba(255, 0, 255, 0.5);
}

/* Kami Mode Limited Drops (Cyan-Blue Glow) */
.template-collection.kami-mode-limited-drop .collection-hero__title,
.template-collection.kami-mode-limited-drop .collection-banner__title {
  color: #00eaff;
  text-shadow:
    0 0 2px rgba(0, 234, 255, 0.8),
    0 0 4px rgba(0, 234, 255, 0.5);
}

/* Cyber Oni Capsule (Crimson Glow) */
.template-collection.cyber-oni-capsule .collection-hero__title,
.template-collection.cyber-oni-capsule .collection-banner__title {
  color: #ff0033;
  text-shadow:
    0 0 2px rgba(255, 0, 51, 0.8),
    0 0 4px rgba(255, 0, 51, 0.5);
}

/* Neon Dojo (Purple Glow) */
.template-collection.neon-dojo .collection-hero__title,
.template-collection.neon-dojo .collection-banner__title {
  color: #9b4dff;
  text-shadow:
    0 0 2px rgba(155, 77, 255, 0.8),
    0 0 4px rgba(155, 77, 255, 0.5);
}

/* Apex Waifu (Hot Pink Glow) */
.template-collection.apex-waifu .collection-hero__title,
.template-collection.apex-waifu .collection-banner__title {
  color: #ff4da6;
  text-shadow:
    0 0 2px rgba(255, 77, 166, 0.8),
    0 0 4px rgba(255, 77, 166, 0.5);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .collection-hero__title,
  .collection-banner__title,
  .collection-hero .title {
    font-size: 3rem !important;
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .collection-hero__title,
  .collection-banner__title,
  .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }
}

/* Cyber Oni Capsule Heading */
.template-collection.cyber-oni-capsule .collection-hero__title,
.template-collection.cyber-oni-capsule .collection-banner__title,
.template-collection.cyber-oni-capsule .collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00ffff; /* Neon cyan */
  text-shadow: 
    0 0 2px rgba(0, 255, 255, 0.9),
    0 0 6px rgba(255, 0, 255, 0.6);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .template-collection.cyber-oni-capsule .collection-hero__title,
  .template-collection.cyber-oni-capsule .collection-banner__title,
  .template-collection.cyber-oni-capsule .collection-hero .title {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(0, 255, 255, 0.8),
      0 0 4px rgba(255, 0, 255, 0.5);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .template-collection.cyber-oni-capsule .collection-hero__title,
  .template-collection.cyber-oni-capsule .collection-banner__title,
  .template-collection.cyber-oni-capsule .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(0, 255, 255, 0.7),
      0 0 3px rgba(255, 0, 255, 0.4);
  }
}

/* Apex Waifu Heading */
.apex-waifu .collection-hero__title,
.apex-waifu .collection-banner__title,
.apex-waifu .collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ff0055; /* Crimson-magenta */
  text-shadow: 
    0 0 2px rgba(255, 0, 85, 0.8),
    0 0 6px rgba(255, 0, 128, 0.6),
    0 0 12px rgba(255, 0, 170, 0.4);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .apex-waifu .collection-hero__title,
  .apex-waifu .collection-banner__title,
  .apex-waifu .collection-hero .title {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(255, 0, 85, 0.7),
      0 0 4px rgba(255, 0, 128, 0.5);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .apex-waifu .collection-hero__title,
  .apex-waifu .collection-banner__title,
  .apex-waifu .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(255, 0, 85, 0.6),
      0 0 2px rgba(255, 0, 128, 0.3);
  }
}

/* Neon Dojo Heading Glow */
.neon-dojo-heading {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00eaff; /* Neon cyan/blue */
  text-shadow: 
    0 0 2px rgba(0, 234, 255, 0.9),
    0 0 6px rgba(0, 234, 255, 0.6);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .neon-dojo-heading {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(0, 234, 255, 0.7),
      0 0 4px rgba(0, 234, 255, 0.4);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .neon-dojo-heading {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(0, 234, 255, 0.6),
      0 0 3px rgba(0, 234, 255, 0.3);
  }
}

/* MEN'S Collection – Bold Neon Blue Accent */
.template-collection[data-handle="men-s"] .collection-hero__title,
.template-collection[data-handle="men-s"] .collection-banner__title,
.template-collection[data-handle="men-s"] .collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00aaff; /* Neon blue */
  text-shadow: 
    0 0 2px rgba(0, 170, 255, 0.8),
    0 0 4px rgba(0, 170, 255, 0.5);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .template-collection[data-handle="men-s"] .collection-hero__title,
  .template-collection[data-handle="men-s"] .collection-banner__title,
  .template-collection[data-handle="men-s"] .collection-hero .title {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(0, 170, 255, 0.7),
      0 0 3px rgba(0, 170, 255, 0.4);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .template-collection[data-handle="men-s"] .collection-hero__title,
  .template-collection[data-handle="men-s"] .collection-banner__title,
  .template-collection[data-handle="men-s"] .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(0, 170, 255, 0.6),
      0 0 2px rgba(0, 170, 255, 0.3);
  }
}

/* Women's Section Heading – Neon Violet Glow */
.template-collection--women-s .collection-hero__title,
.template-collection--women-s .collection-banner__title,
.template-collection--women-s .collection-hero .title {
  font-size: 6rem !important;   /* Desktop */
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ff4de3; /* Neon pink-violet */
  text-shadow: 
    0 0 2px rgba(255, 77, 227, 0.8),
    0 0 6px rgba(255, 77, 227, 0.6),
    0 0 12px rgba(255, 77, 227, 0.4);
}

/* Tablet view */
@media screen and (max-width: 768px) {
  .template-collection--women-s .collection-hero__title,
  .template-collection--women-s .collection-banner__title,
  .template-collection--women-s .collection-hero .title {
    font-size: 3rem !important;
    text-shadow: 
      0 0 2px rgba(255, 77, 227, 0.7),
      0 0 5px rgba(255, 77, 227, 0.5);
  }
}

/* Mobile view */
@media screen and (max-width: 480px) {
  .template-collection--women-s .collection-hero__title,
  .template-collection--women-s .collection-banner__title,
  .template-collection--women-s .collection-hero .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    text-shadow: 
      0 0 1px rgba(255, 77, 227, 0.6),
      0 0 3px rgba(255, 77, 227, 0.4);
  }
}

/* Mobile Navigation Fix */
@media screen and (max-width: 768px) {
  .header__menu li a {
    font-size: 0.85rem !important;   /* Shrinks text slightly */
    padding: 6px 10px !important;    /* Adds breathing room */
    letter-spacing: 1px;             /* Keeps it stylish but readable */
  }

  .header__menu {
    flex-wrap: wrap !important;      /* Allows items to drop into 2 lines if needed */
    justify-content: center !important;
  }
}

/* --- Mobile nav: single row + swipe --- */
@media (max-width: 768px){
  /* catch-all header/nav containers */
  header .list-menu,
  .header .list-menu,
  header nav ul,
  .header nav ul{
    display: inline-flex !important;
    gap: 12px !important;
    white-space: nowrap !important;
  }

  header .list-menu--inline,
  .header .list-menu--inline,
  header nav,
  .header nav{
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .list-menu--inline::-webkit-scrollbar,
  .header .list-menu--inline::-webkit-scrollbar,
  header nav::-webkit-scrollbar,
  .header nav::-webkit-scrollbar{ display:none; }

  /* menu items */
  header .list-menu__item > a,
  .header .list-menu__item > a,
  header nav ul li > a,
  .header nav ul li > a{
    flex: 0 0 auto !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  /* prevent header from forcing weird widths */
  .header__menu{ flex: 1 1 auto; min-width: 0; }
  .header{ padding-top: 8px; padding-bottom: 8px; }
}

/* Force mobile hamburger + hide inline links on small screens */
@media (max-width: 989px) {
  /* Hide the horizontal link list */
  .header__inline-menu,
  .header__inline-menu .list-menu,
  header .list-menu--inline {
    display: none !important;
  }

  /* Make sure the hamburger (menu button) shows */
  .header__icons .header__icon--menu,
  .header__icon--menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure the menu drawer overlay can appear above the header */
  .menu-drawer,
  .menu-drawer__navigation {
    z-index: 9999 !important;
  }
}

/* ===== Mobile menu fit + restore visibility ===== */
@media (max-width: 768px) {
  /* Shrink logo a bit so links have room */
  .header__heading-logo,
  .header__heading a img {
    max-width: 120px !important;
    height: auto !important;
  }

  /* Let the inline menu wrap into two neat rows */
  .header__inline-menu .list-menu,
  header .list-menu--inline {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 14px !important;       /* row-gap / column-gap */
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  /* Make each link smaller/tighter on mobile */
  .header__inline-menu a,
  header .list-menu--inline a {
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 6px 0 !important;
  }

  /* Extra-tight on very small phones */
  @media (max-width: 430px) {
    .header__inline-menu a,
    header .list-menu--inline a {
      font-size: 12px !important;
    }
  }

  /* Save space: show account/cart as icons (hide text labels) */
  .header__icons a[href*="account"] { font-size: 0 !important; }
  .header__icons a[href*="account"]::before {
    content: "👤"; font-size: 18px; margin-right: 0;
  }
  .header__icons a[href*="cart"] { font-size: 0 !important; }
  .header__icons a[href*="cart"]::before {
    content: "🛒"; font-size: 18px; margin-right: 0;
  }
}

/* DEBUG: remove after test */
html { outline: 2px solid limegreen !important; }


/* === KAMI MODE: Mobile header/drawer === */
.km-no-scroll { overflow: hidden; }

/* Desktop: hide burger/drawer entirely */
@media (min-width: 991px) {
  #kmMenuToggle,
  #km-menu-drawer { display: none !important; }
}

/* Mobile: hide long inline menu, show burger, style drawer */
@media (max-width: 990px) {
  /* Hide the inline nav that’s overflowing on mobile */
  .kami-nav,
  .kami-nav_list,
  .header__inline-menu,
  .list-menu { display: none !important; }

  /* Burger button */
  .km-menu-toggle {
    position: absolute;
    right: 16px;
    top: 10px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: #0f0f10;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    color: #fff;
    z-index: 1001;
  }
  .km-burger,
  .km-burger::before,
  .km-burger::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    border-radius: 2px;
  }
  .km-burger::before { position: absolute; top: -6px; left: 0; }
  .km-burger::after  { position: absolute; top:  6px; left: 0; }

  /* Drawer container */
  .km-drawer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1000;
    padding-top: 64px; /* leave space for close button */
  }
  .km-drawer.open { transform: translateX(0); }

  .km-menu-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 28px;
    color: #fff;
    line-height: 1;
  }

  .km-drawer__list {
    list-style: none;
    margin: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .km-drawer__item a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .3px;
  }
  .km-drawer__item a:active { opacity: .75; }
}

/* --- KM HEADER VISIBILITY FIX --- */

/* DESKTOP default: show inline nav, hide hamburger & drawer */
.km-menu-toggle { display: none !important; }
#km-menu-drawer { display: none !important; }
.kami-nav,
.kami-nav_list,
.kami-nav_item { display: flex !important; }

/* MOBILE: hide inline nav, show hamburger */
@media (max-width: 990px) {
  /* hide the long inline nav on small screens */
  .kami-nav,
  .kami-nav_list { display: none !important; }

  /* show the hamburger */
  .km-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    gap: 8px;
    z-index: 10002;
  }

  /* drawer base (it’s JS-toggled open/hidden) */
  #km-menu-drawer.km-drawer { display: block !important; }
}

/* --- KM HEADER VISIBILITY RULES --- */

/* default = desktop */
.km-menu-toggle { display: none !important; }
#km-menu-drawer { display: none !important; }

/* mobile only */
@media (max-width: 990px){
  /* hide inline nav on small screens */
  .kami-nav,
  .kami-nav_list { display: none !important; }

  /* show hamburger */
  .km-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    gap: 8px;
    z-index: 10002;
  }

  /* allow drawer to exist; JS toggles open/close */
  #km-menu-drawer.km-drawer { display: block !important; }
}

/* === Mobile nav: force one horizontal row (swipe) === */
@media (max-width: 990px){

  /* The <nav> itself becomes a scroll container */
  .kami-header nav.kami-nav{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    white-space: nowrap !important;
  }
  .kami-header nav.kami-nav::-webkit-scrollbar{ display:none; } /* WebKit */

  /* The list is a no-wrap flex row */
  .kami-header .kami-nav__list{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  /* Each item keeps its width; never shrinks */
  .kami-header .kami-nav__item{
    list-style: none !important;
    flex: 0 0 auto !important;
  }

  /* Links stay on one line and align nicely */
  .kami-header .kami-nav__link{
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Make sure the header stays above the hero */
  .kami-header{ position: relative; z-index: 50; }
}

/* KAMI — Mobile: restore + tidy nav */
@media (max-width: 990px){

  /* make sure the nav shows up */
  nav.kami-nav{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;

    /* horizontal scroll row */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap !important;
  }
  nav.kami-nav::-webkit-scrollbar{ display: none; }

  /* the list is a single no-wrap row */
  .kami-nav__list{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }

  /* items don’t shrink */
  .kami-nav__item{ flex: 0 0 auto !important; list-style: none !important; }

  /* keep each label on one line */
  .kami-nav__link{
    display: inline-block !important;
    padding: 8px 8px !important;
    white-space: nowrap !important;
  }

  /* keep header above the hero */
  .kami-header{ position: relative; z-index: 50; }
}

/* === KAMI: mobile hamburger + drawer (mobile only) === */

/* Hide hamburger by default; desktop shows inline nav */
.km-menu-toggle { display: none; }

/* MOBILE styles */
@media (max-width: 990px) {

  /* show hamburger, hide the inline nav row */
  .km-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    top: 18px;          /* adjust if needed */
    right: 16px;        /* adjust if needed */
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 700;
    z-index: 1002;
    cursor: pointer;
  }
  .km-menu-toggle svg rect { fill: #fff; }

  /* hide inline nav on mobile */
  .kami-nav,
  .kami-nav .kami-nav__list { display: none !important; }

  /* drawer shell */
  #km-menu-drawer {
    position: fixed;
    inset: 0 0 0 auto; /* right-side sheet */
    width: min(86vw, 360px);
    height: 100%;
    background: #000;
    color: #fff;
    z-index: 1001;
    right: -100%;
    transition: right 0.25s ease;
  }
  #km-menu-drawer.open { right: 0; }

  .km-drawer__inner {
    position: relative;
    height: 100%;
    padding: 28px 24px 40px;
    overflow-y: auto;
  }

  .km-menu-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 28px;
    line-height: 1; border: 0; background: transparent; color: #fff;
    cursor: pointer;
  }

  .km-drawer__list { list-style: none; margin: 60px 0 0; padding: 0; }
  .km-drawer__item { margin: 0; }
  .km-drawer__link {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
  }

  /* lock scroll while open */
  html.km-no-scroll, body.km-no-scroll { overflow: hidden; }
}

/* DESKTOP safeguard: keep existing inline nav, hide mobile controls */
@media (min-width: 991px) {
  .km-menu-toggle,
  #km-menu-drawer { display: none !important; }
  .kami-nav,
  .kami-nav .kami-nav__list { display: flex !important; }
}

/* === KAMI MODE: Mobile hamburger polish === */
@media (max-width: 990px) {
  /* Make sure header is a positioning context */
  .kami-header { position: relative; }

  /* Place the hamburger on the LEFT, no overlap with Log in / Cart */
  .km-menu-toggle{
    position: absolute;
    left: max(12px, env(safe-area-inset-left)); /* iOS notch friendly */
    top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: #fff;
    z-index: 1001; /* above header background */
  }
  .km-menu-toggle svg { pointer-events: none; }

  /* Hide the visible "OPEN MENU" label; keep it for screen readers */
  .km-menu-toggle .sr-only{
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }

  /* Keep right-side actions comfy; not strictly required once button is left */
  .kami-actions{ padding-right: 12px; }
}

/* When drawer is open, prevent page scroll (your JS toggles .km-no-scroll) */
.km-no-scroll { overflow: hidden; }

/* === KAMI: Neon hamburger + drawer polish (mobile) === */
:root{
  --km-neon-pink: #ff1aff;
  --km-neon-cyan: #00eaff;
  --km-ink: #0a0016;
}

/* Position + style the toggle */
@media (max-width: 990px){
  .km-menu-toggle{
    position: absolute;
    left: 12px;
    top: 12px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(10,0,22,.35);
    color: #fff;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 18px 2px rgba(255,26,255,.25);
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    z-index: 1000;
  }
  /* make the SVG bars adopt currentColor (white/cyan) */
  .km-menu-toggle svg rect{ fill: currentColor; }

  .km-menu-toggle:hover{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 26px 4px rgba(255,26,255,.38);
    transform: translateY(-1px);
  }
  .km-menu-toggle[aria-expanded="true"]{
    color: var(--km-neon-cyan);
    border-color: rgba(0,234,255,.55);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 28px 6px rgba(0,234,255,.45);
  }
}

@media (max-width: 990px){
  /* Drawer panel */
  #km-menu-drawer{
    /* you already slide from right; add fade + neon void bg */
    opacity: 0;
    background:
      radial-gradient(900px 280px at 110% 0%, rgba(0,234,255,.18), transparent 60%),
      radial-gradient(1200px 300px at 0% -10%, rgba(255,26,255,.22), transparent 55%),
      linear-gradient(180deg, rgba(10,0,28,.97), rgba(5,0,16,.98));
    border-left: 1px solid rgba(255,255,255,.08);
    box-shadow: -14px 0 40px rgba(255,26,255,.15);
    transition: right .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
  }
  #km-menu-drawer.open{ opacity: 1; }

  /* Inside spacing */
  .km-drawer_list{
    padding: 20px 22px 64px;
  }

  /* Links */
  .km-drawer_link{
    display: block;
    padding: 14px 2px;
    font-size: 18px;
    letter-spacing: .3px;
    color: #fff;
    text-decoration: none;
    position: relative;
  }
  .km-drawer_item + .km-drawer_item{
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .km-drawer_link::after{
    content: "";
    position: absolute;
    left: 0; bottom: 6px;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--km-neon-pink), var(--km-neon-cyan));
    transition: width .2s ease;
  }
  .km-drawer_link:hover::after{ width: 100%; }

  /* Close button look */
  .km-menu-close{
    position: absolute; top: 10px; right: 10px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(10,0,26,.3);
    color: #fff;
    transition: border-color .2s, box-shadow .2s, color .2s;
  }
  .km-menu-close:hover{
    color: var(--km-neon-cyan);
    border-color: rgba(0,234,255,.55);
    box-shadow: 0 0 24px rgba(0,234,255,.45);
  }

  /* When drawer is open, prevent background scroll (you already add km-no-scroll on <html>) */
  .km-no-scroll{ overflow: hidden; touch-action: none; }
}

/* iOS notch safe areas so the button never hugs the edge */
@supports (padding: max(0px)){
  @media (max-width: 990px){
    .km-menu-toggle{
      top: calc(env(safe-area-inset-top) + 8px);
      left: calc(env(safe-area-inset-left) + 12px);
    }
    #km-menu-drawer{
      padding-top: max(20px, env(safe-area-inset-top) + 8px);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* === KAMI MODE — Mobile premium drawer & toggle === */
:root{
  --km-pink: #ff2fb0;
  --km-cyan: #55f3ff;
}

/* PHONE ONLY */
@media (max-width: 990px){

  /* 1) Hamburger button (neon, left, safe-area friendly) */
  .km-menu-toggle{
    display: block !important;
    position: absolute;
    left: max(14px, env(safe-area-inset-left, 0px) + 10px);
    top:  calc(env(safe-area-inset-top, 0px) + 10px);
    width: 48px; height: 48px;
    padding: 10px;
    border-radius: 14px;
    background:
      radial-gradient(120% 120% at 20% 20%, rgba(255,47,176,.28), transparent 60%),
      linear-gradient(135deg, rgba(255,47,176,.22), rgba(85,243,255,.22));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 0 18px rgba(255,47,176,.35),
      0 0 28px rgba(85,243,255,.22);
    z-index: 1001; /* above the header */
  }
  .km-menu-toggle svg{ display:block; }
  .km-menu-toggle svg rect{
    fill: #fff;
    transition: transform .25s ease, opacity .25s ease, y .25s ease;
  }
  /* Morph to X when expanded */
  .km-menu-toggle[aria-expanded="true"] svg rect:nth-of-type(1){
    transform: translateY(5px) rotate(45deg);
  }
  .km-menu-toggle[aria-expanded="true"] svg rect:nth-of-type(2){
    opacity: 0; transform: scaleX(0);
  }
  .km-menu-toggle[aria-expanded="true"] svg rect:nth-of-type(3){
    transform: translateY(-5px) rotate(-45deg);
  }

  /* 2) Drawer as full-width overlay, panel on the right */
  #km-menu-drawer{
    position: fixed;
    top: 0; right: -100vw; bottom: 0; left: auto;
    width: 100vw;
    height: 100dvh; /* mobile-safe viewport */
    background: transparent;      /* becomes a dim overlay when open */
    transition: right .32s ease, background .32s ease;
    z-index: 1000;
  }
  #km-menu-drawer.open{
    right: 0;
    background: rgba(0,0,0,.55);
  }

  /* The sliding panel */
  .km-drawer__inner{
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 80%;
    max-width: 360px;
    background: linear-gradient(180deg, #0b0b0f 0%, #000 100%);
    border-left: 1px solid rgba(255,255,255,.08);
    box-shadow:
      -12px 0 30px rgba(255,47,176,.20),
      -24px 0 54px rgba(85,243,255,.12);
    padding: clamp(18px, 3.6vw, 28px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
    display: flex; flex-direction: column; gap: 12px;
  }

  /* Close button in the panel (if you added it) */
  .km-menu-close{
    position: absolute; right: 14px;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    width: 40px; height: 40px;
    background: transparent; border: 0; color: #fff;
  }

  /* Menu links */
  .km-drawer__list{
    list-style: none; margin: 62px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .km-drawer__link{
    display: block;
    padding: 12px 8px;
    color: #f5f5f7;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: .02em;
    border-radius: 10px;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
  }
  .km-drawer__link:hover,
  .km-drawer__link:active{
    color: #fff;
    background: linear-gradient(90deg, rgba(255,47,176,.13), rgba(85,243,255,.13));
    box-shadow:
      0 0 0 1px rgba(255,47,176,.35) inset,
      0 0 24px rgba(255,47,176,.25),
      0 0 30px rgba(85,243,255,.15);
  }

  /* 3) Keep body from scrolling when drawer is open (your JS already toggles this) */
  html.km-no-scroll{ position: fixed; width: 100%; }
  html.km-no-scroll, body{ overscroll-behavior: contain; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .km-menu-toggle svg rect,
    #km-menu-drawer,
    .km-drawer__link { transition: none; }
  }
}
/* === End mobile premium block === */

.km-menu-toggle {
  background: linear-gradient(135deg, #ff004f, #ff2a6d);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 0 15px rgba(255, 0, 100, 0.8), 0 0 30px rgba(0, 255, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.km-menu-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(255, 0, 100, 1), 0 0 45px rgba(0, 255, 255, 0.9);
}

#km-menu-drawer {
  background: linear-gradient(180deg, #0a0a0f 0%, #111122 50%, #0a0a0f 100%);
  box-shadow: inset 0 0 60px rgba(255, 0, 100, 0.2), inset 0 0 120px rgba(0, 255, 255, 0.15);
  animation: pulseGlow 4s infinite alternate;
}
@keyframes pulseGlow {
  0% { box-shadow: inset 0 0 40px rgba(255, 0, 100, 0.15), inset 0 0 80px rgba(0, 255, 255, 0.1); }
  100% { box-shadow: inset 0 0 80px rgba(255, 0, 100, 0.3), inset 0 0 160px rgba(0, 255, 255, 0.2); }
}

.km-drawer_link {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.km-drawer_link:hover {
  color: #ff2a6d;
  text-shadow: 0 0 10px #ff2a6d, 0 0 20px #00f0ff;
}

/* =========================================================
   KAMI MODE — MOBILE NEON (ULTRA-SAFE, NO LAYOUT CHANGES)
   Visual layers ONLY. Works at ≤ 990px.
   ========================================================= */
@media (max-width: 990px){

  /* Header soft aura (paint-only) */
  .kami-header::before{
    content:"";
    position:absolute;
    /* anchor to the header’s current box without changing it */
    top:-8px; right:-8px; bottom:-6px; left:-8px;
    pointer-events:none;
    background:
      radial-gradient(120px 60px at 36px 34px, rgba(53,240,255,.18), transparent 60%),
      linear-gradient(90deg, rgba(255,73,195,.12), rgba(120,0,255,.12));
    filter: blur(12px);
  }

  /* Hamburger glow — DO NOT TOUCH the button itself */
  .km-menu-toggle::before{
    content:"";
    position:absolute;
    /* paint outside without affecting the button box */
    top:-10px; right:-10px; bottom:-10px; left:-10px;
    border-radius:16px;
    pointer-events:none;
    background:
      radial-gradient(110px 80px at 20% 25%, rgba(255,73,195,.22), transparent 60%),
      radial-gradient(110px 80px at 80% 75%, rgba(53,240,255,.16), transparent 60%);
    filter: blur(14px);
  }

  /* Drawer: add a background glow layer only */
  .km-drawer{
    background-color:#0b0b10; /* safe solid base to ensure contrast */
  }
  .km-drawer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(40% 20% at 0% 6%, rgba(53,240,255,.14), transparent 60%),
      radial-gradient(28% 22% at 6% 16%, rgba(255,73,195,.14), transparent 70%);
    filter: blur(10px);
  }

  /* Drawer links: light-up text only (no size/padding change) */
  .km-drawer_link{
    text-decoration:none;
    transition: text-shadow .18s ease, color .18s ease;
  }
  .km-drawer_link:hover{
    color:#fff;
    text-shadow:
      0 0 8px rgba(255,73,195,.55),
      0 0 18px rgba(53,240,255,.35);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .km-drawer_link{ transition:none; }
    .km-menu-toggle::before,
    .kami-header::before{ filter: blur(8px); }
  }
}

/* =========================================================
   KAMI MODE — Mobile drawer polish (no layout side-effects)
   - Always-visible close button
   - Smooth GPU transform animation
   - No changes to hamburger position
   ========================================================= */
@media (max-width: 990px){

  /* Drawer container: transform-based slide-in (fast) */
  .km-drawer{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    /* width tuned for phones; adjust if you want it wider/narrower */
    width: 86vw; 
    max-width: 420px;

    /* Make sure older 'right: -100%' animations are neutralized */
    right: 0 !important;

    /* Smooth, GPU-accelerated animation */
    transform: translateX(100%);
    will-change: transform;
    transition: transform 260ms cubic-bezier(.22,.61,.36,1);

    /* Scrolling inside the drawer stays buttery */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Room at the top for the close button, including iOS notch */
    padding: calc(14px + env(safe-area-inset-top)) 24px 24px;

    /* Subtle depth */
    background-color: #0b0b10; /* solid for contrast */
    box-shadow: -24px 0 40px rgba(0,0,0,.45);
    z-index: 1100;
  }
  .km-drawer.open{ transform: translateX(0); }

  /* Ensure any legacy transitions on "right" don't run */
  .km-drawer{ transition-property: transform !important; }

  /* Close button is always fully visible, even when scrolled */
  .km-menu-close{
    position: sticky;
    top: calc(env(safe-area-inset-top) + 8px);
    z-index: 2;
    /* Nice big tap target without shifting layout */
    width: 44px; height: 44px;
    border: 0; background: transparent;
    padding: 0; margin: 0 0 12px -4px;
    /* prevents accidental text selection on rapid taps */
    -webkit-tap-highlight-color: transparent;
  }

  /* Comfortable spacing + crisp taps for links (no font/size changes) */
  .km-drawer_item{ margin: 18px 0; }
  .km-drawer_link{ display:inline-block; padding: 6px 0; }

  /* Reduce any filter cost during the slide to avoid jank */
  .km-drawer::before{ filter: blur(6px); }
  .km-menu-toggle::before,
  .km-drawer::before{ will-change: opacity, filter; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .km-drawer{ transition: none; }
  }
}

/* === KAMI MOBILE: Pin CLOSE to top-right inside drawer (safe-area aware) === */
@media (max-width: 990px){
  /* Make the drawer a positioning context and leave space for the button */
  .km-drawer{
    position: fixed;
    inset: 0 0 0 auto;              /* keep your current right-side drawer */
    width: 86vw;                     /* whatever you already use is fine */
    max-width: 420px;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-right: calc(16px + env(safe-area-inset-right));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Absolutely pin the close button at top-right INSIDE the drawer panel */
  .km-drawer .km-menu-close{
    position: absolute;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    left: auto;                      /* neutralize any left from earlier */
    z-index: 5;
    width: 44px; height: 44px;       /* big tap target */
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Optional: slight glow so you can see it against bright banners */
  .km-drawer .km-menu-close svg{
    filter: drop-shadow(0 0 6px rgba(255,73,195,.5))
            drop-shadow(0 0 10px rgba(53,240,255,.35));
  }
}

/* === KAMI MOBILE: Clean Close Button in Drawer === */
@media (max-width: 990px){
  .km-drawer .km-menu-close{
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    left: auto;
    z-index: 10;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    font-size: 0; /* hide any text */
    background: transparent;
    border: none;
    cursor: pointer;
  }

  /* Replace text "CLOSE" with an ✕ icon style */
  .km-drawer .km-menu-close::before{
    content: "✕";
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    display: block;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255,73,195,.7),
                 0 0 12px rgba(53,240,255,.6);
  }
}

/* === KAMI MOBILE: Clean Close Button in Drawer === */
@media (max-width: 990px){
  .km-drawer .km-menu-close{
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    left: auto;
    z-index: 10;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    font-size: 0; /* hide any text */
    background: transparent;
    border: none;
    cursor: pointer;
  }

  /* Replace text "CLOSE" with an ✕ icon style */
  .km-drawer .km-menu-close::before{
    content: "✕";
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    display: block;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255,73,195,.7),
                 0 0 12px rgba(53,240,255,.6);
  }
}

/********************
 KAMI MODE — FINAL MOBILE POLISH
*********************/
@media (max-width: 990px) {

  /* 1) Subtle gradient overlay on drawer for VOID x Neon depth */
  #km-menu-drawer {
    background: linear-gradient(180deg,
      rgba(5, 5, 7, 0.98) 0%,
      rgba(15, 0, 40, 0.96) 100%);
    border-left: 1px solid rgba(255, 64, 180, 0.08);
  }

  /* 2) Neon accent line under active links */
  .km-drawer_link.active,
  .km-drawer_link[aria-current="page"] {
    position: relative;
    color: #ff40b4;
    text-shadow: 0 0 12px rgba(255, 64, 180, .6);
  }
  .km-drawer_link.active::after,
  .km-drawer_link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, #ff40b4, #8d00ff);
    box-shadow: 0 0 10px rgba(255, 64, 180, .6);
  }

  /* 3) Smooth fade backdrop for immersive look */
  body.km-drawer-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    animation: fadeIn 0.35s ease forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* FORCE drawer gradient background for mobile */
@media (max-width: 990px) {
  #km-menu-drawer {
    background: linear-gradient(180deg,
      rgba(5, 5, 7, 0.98) 0%,
      rgba(15, 0, 40, 0.96) 100%) !important;
    border-left: 1px solid rgba(255, 64, 180, 0.12);
  }
}

/* === KAMI — Mobile drawer neon background (hard override) === */
.kami-header #km-menu-drawer.km-drawer {
  /* nuke any earlier background */
  background: none !important;

  /* new background */
  background-color: rgba(8, 8, 12, 0.92) !important; /* deep charcoal with alpha */
  background-image:
    radial-gradient(140px 140px at 16px 72px, rgba(0, 255, 224, 0.25), transparent 60%),
    radial-gradient(200px 200px at 85% 12%, rgba(255, 0, 184, 0.22), transparent 65%),
    linear-gradient(165deg, rgba(13, 13, 18, 0.98), rgba(13, 13, 18, 0.96));
  background-blend-mode: screen, screen, normal !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ensure the inner shell doesn’t paint over it */
.km-drawer__inner { 
  background: transparent !important; 
}

/* keep the white “X” fully visible in the top-right */
.km-menu-close {
  position: absolute; 
  top: 16px; 
  right: 16px; 
  background: transparent !important;
}

/* optional: a subtle neon rim on the drawer edge */
.km-drawer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1px; width: 1px;
  box-shadow: 0 0 18px rgba(0, 255, 224, 0.55), 0 0 28px rgba(255, 0, 184, 0.35);
  pointer-events: none;
}

/* === KAMI — Mobile drawer micro-polish (safe) === */

/* 1) Slightly stronger glass + smoother open feel */
.kami-header #km-menu-drawer.km-drawer {
  background-color: rgba(8, 8, 12, 0.94) !important; /* a hair darker */
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1),
              opacity .26s ease-out, background-color .26s ease-out;
}

/* 2) Crisp list spacing + bigger tap area (same look, nicer feel) */
.km-drawer__list { padding: 20px 22px 32px 22px; }
.km-drawer__item { margin: 18px 0; }
.km-drawer__link {
  display: block;
  padding: 8px 6px;             /* increases tap target */
  letter-spacing: .2px;
  text-decoration: none;
}

/* 3) Subtle hover/active feedback (supports touch too) */
.km-drawer__link:active { transform: translateY(1px); opacity: .9; }

/* 4) Gentle divider sheen on the left edge */
.km-drawer::after{
  content:"";
  position:absolute; inset:0 auto 0 0; width:12px;
  background: linear-gradient(180deg, rgba(0,255,224,.25), rgba(255,0,184,.18));
  filter: blur(10px); opacity:.55; pointer-events:none;
}

/* 5) Ensure backdrop click closes cleanly without stutter */
html.km-no-scroll, body.km-no-scroll { overflow:hidden; touch-action:none; }

/* 6) Keep the Close “X” crisp */
.km-menu-close {
  -webkit-tap-highlight-color: transparent;
  opacity: .95;
}
.km-menu-close:active { transform: scale(.96); opacity: .85; }

/* === KAMI — Neon underline for active/pressed links (mobile only) === */
@media (max-width: 990px) {
  .km-drawer__link {
    position: relative;
    transition: color 0.25s ease;
  }

  .km-drawer__link:after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 1px;
    background: linear-gradient(90deg, #ff0080, #00ffe0);
    box-shadow: 0 0 6px rgba(255, 0, 128, 0.75),
                0 0 12px rgba(0, 255, 224, 0.55);
    transition: width 0.3s ease;
  }

  .km-drawer__link:active:after,
  .km-drawer__link:focus:after {
    width: 100%;
  }
}

/* ===============================
   KAMI MODE — Mobile God-Tier Polish
   Scope: max-width: 990px (mobile only)
   Append-only. Do not delete earlier rules.
================================== */
@media (max-width: 990px) {

  /* 1) Drawer entrance: premium glide */
  .km-drawer {
    /* initial (closed) */
    opacity: 0;
    transform: translateX(-12px) scale(0.992);
    transition:
      opacity .28s ease,
      transform .28s ease,
      box-shadow .28s ease;
    will-change: transform, opacity;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    /* soft inner gradient so text sits on a subtle well */
    background:
      radial-gradient(1200px 600px at 0% 50%, rgba(163, 63, 255, 0.08), transparent 60%),
      radial-gradient(1200px 600px at 100% 50%, rgba(0, 255, 245, 0.06), transparent 60%),
      rgba(8, 8, 12, 0.86); /* keep it mostly black, just richer */
    /* drawer should scroll independently */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .km-drawer.open {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  /* 2) Neon edge glow (right edge “lit rim”) */
  .km-drawer::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 2px;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(255, 116, 255, 0.0) 0%,
        rgba(255, 116, 255, 0.45) 25%,
        rgba(0, 255, 245, 0.45) 75%,
        rgba(0, 255, 245, 0.0) 100%
      );
    filter: blur(2px);
    opacity: .75;
  }
  .km-drawer.open {
    box-shadow:
      0 0 40px rgba(163, 63, 255, 0.10),
      0 0 80px rgba(0, 255, 245, 0.08);
  }

  /* 3) Close “X” – bigger, aligned, tappable with glow */
  .km-menu-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 14px);
    right: 16px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    box-shadow: 0 0 0 0 rgba(255, 116, 255, 0);
    transition:
      transform .16s ease,
      box-shadow .24s ease,
      background-color .24s ease;
  }
  .km-menu-close svg,
  .km-menu-close [aria-hidden="true"] {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
  }
  .km-menu-close:active { transform: scale(0.96); }
  .km-menu-close:hover {
    background: rgba(255,255,255,0.04);
    box-shadow:
      0 0 0 6px rgba(163, 63, 255, 0.08),
      0 0 18px rgba(163, 63, 255, 0.35);
  }

  /* 4) Menu links: capsule highlight & rhythm */
  .km-drawer_list { padding: 18px 18px 28px; }
  .km-drawer_item { margin: 14px 0; }
  .km-drawer_link {
    display: block;
    padding: 14px 18px;
    border-radius: 14px;
    line-height: 1.2;
    transition:
      color .2s ease,
      background-color .2s ease,
      box-shadow .2s ease,
      transform .12s ease;
  }
  /* active/pressed (you already have a pill—this refines it) */
  .km-drawer_link.is-active,
  .km-drawer_link:active {
    background:
      linear-gradient(90deg, rgba(163, 63, 255, .16), rgba(0, 255, 245, .12));
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06) inset,
      0 6px 26px rgba(163, 63, 255, .18),
      0 10px 36px rgba(0, 255, 245, .14);
    transform: translateY(0); /* keep firm feel, no bouncy */
  }
  .km-drawer_link:hover {
    background:
      linear-gradient(90deg, rgba(163, 63, 255, .10), rgba(0, 255, 245, .08));
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 4px 18px rgba(163, 63, 255, .12),
      0 8px 22px rgba(0, 255, 245, .10);
  }

  /* 5) Hamburger button: subtle idle life (position unchanged) */
  .km-menu-toggle {
    box-shadow:
      0 0 0 0 rgba(255, 116, 255, 0.0),
      0 0 40px rgba(255, 0, 122, 0.0),
      0 0 60px rgba(0, 255, 245, 0.0);
    transition:
      transform .14s ease,
      box-shadow .4s ease;
  }
  .km-menu-toggle:active { transform: scale(0.96); }
  /* gentle pulse */
  @keyframes kmGlow {
    0%, 100% { box-shadow:
      0 0 0 0 rgba(255, 116, 255, 0.00),
      0 0 40px rgba(255, 0, 122, 0.10),
      0 0 70px rgba(0, 255, 245, 0.08); }
    50% { box-shadow:
      0 0 0 0 rgba(255, 116, 255, 0.00),
      0 0 50px rgba(255, 0, 122, 0.16),
      0 0 90px rgba(0, 255, 245, 0.12); }
  }
  .km-menu-toggle { animation: kmGlow 4.5s ease-in-out infinite; }

  /* 6) UX polish: safe-areas & scroll behavior */
  .km-drawer {
    padding-top: calc(env(safe-area-inset-top, 0) + 12px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
  }
  html.km-no-scroll,
  body.km-no-scroll {
    overflow: hidden;
    touch-action: none;
  }
}

/* Reduced motion: keep it luxe but still */
@media (prefers-reduced-motion: reduce) {
  .km-drawer,
  .km-drawer.open,
  .km-menu-toggle,
  .km-menu-close {
    transition: none !important;
    animation: none !important;
  }
}

/* === KAMI MODE: Neon Social Icons (Phone Only) === */
@media (max-width: 768px) {
  .footer__social a svg {
    width: 28px;
    height: 28px;
    fill: #fff !important;
    stroke: none !important;
    filter: drop-shadow(0 0 6px rgba(255, 0, 255, 0.8))
            drop-shadow(0 0 12px rgba(0, 255, 255, 0.8));
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .footer__social a:hover svg {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(255, 0, 255, 1))
            drop-shadow(0 0 20px rgba(0, 255, 255, 1));
  }

  /* Optional neon ring around icons */
  .footer__social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    padding: 6px;
    margin: 0 8px;
    animation: neonPulse 3s infinite alternate;
  }

  @keyframes neonPulse {
    from {
      box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
    }
    to {
      box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
    }
  }
}

/* ================================
   KAMI MODE — Mobile Footer Glow Pack
   Paste at the very bottom of assets/base.css
   ================================ */

@media (max-width: 990px) {

  /* 0) Subtle breathing sheen (very light) */
  @keyframes km-breathe {
    0%   { opacity: .55; filter: hue-rotate(0deg);   }
    50%  { opacity: .80; filter: hue-rotate(10deg);  }
    100% { opacity: .55; filter: hue-rotate(0deg);   }
  }

  /* Scope to footer so nothing upstream moves */
  footer, .footer { position: relative; }
  footer::after, .footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 60% at 10% 20%, rgba(255, 0, 128, .08) 0%, rgba(0, 255, 255, .06) 40%, transparent 70%);
    animation: km-breathe 6s ease-in-out infinite;
    z-index: 0; /* sits under content */
  }

  /* 1) Newsletter input + submit → neon frame */
  /* Input field */
  footer input[type="email"],
  footer .newsletter-form .field__input,
  footer .newsletter-form input[type="email"] {
    border: 2px solid rgba(255, 0, 160, .35) !important;
    background: rgba(0, 0, 0, .88) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow:
      0 0 0 2px rgba(255, 0, 160, .12) inset,
      0 0 18px rgba(255, 0, 160, .25),
      0 0 28px rgba(0, 255, 255, .12);
    transition: box-shadow .2s ease, border-color .2s ease;
    position: relative;
    z-index: 1;
  }
  footer input[type="email"]::placeholder,
  footer .newsletter-form .field__input::placeholder { color: rgba(255,255,255,.65); }

  footer input[type="email"]:focus,
  footer .newsletter-form .field__input:focus {
    outline: none !important;
    border-color: rgba(255, 0, 200, .75) !important;
    box-shadow:
      0 0 0 2px rgba(255, 0, 200, .22) inset,
      0 0 24px rgba(255, 0, 200, .35),
      0 0 36px rgba(0, 255, 255, .18);
  }

  /* Submit button (arrow) — keep layout, just style */
  footer .newsletter-form button,
  footer .newsletter-form .button,
  footer button[type="submit"].newsletter-form__button {
    background: linear-gradient(90deg, #ff2aa7 0%, #7a5cff 50%, #00e5ff 100%) !important;
    color: #0d0d0f !important;
    font-weight: 700;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
      0 8px 20px rgba(122, 92, 255, .35),
      0 0 24px rgba(255, 42, 167, .35);
  }

  /* 2) Social icons (IG / TikTok) — neon pucks */
  footer .list-social,
  footer .social-icons { gap: 18px; position: relative; z-index: 1; }

  footer .list-social a,
  footer .list-social__link,
  footer .social-icons a {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background:
      radial-gradient(120% 120% at 20% 20%, rgba(255, 0, 160, .22) 0%, rgba(0, 229, 255, .18) 40%, rgba(10,10,14,.9) 60%);
    box-shadow:
      0 0 0 2px rgba(255, 0, 160, .24) inset,
      0 8px 24px rgba(255, 0, 160, .25),
      0 0 36px rgba(0, 229, 255, .18);
    transition: transform .15s ease, box-shadow .15s ease;
  }

  /* Make the icon glyph itself bright white */
  footer .list-social a svg,
  footer .list-social__link svg,
  footer .social-icons a svg { fill: #fff !important; opacity: .95; }

  /* Hover / tap feedback */
  footer .list-social a:active,
  footer .list-social a:hover,
  footer .list-social__link:active,
  footer .list-social__link:hover,
  footer .social-icons a:active,
  footer .social-icons a:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
      0 0 0 2px rgba(255, 0, 200, .32) inset,
      0 10px 28px rgba(255, 0, 200, .35),
      0 0 42px rgba(0, 229, 255, .22);
  }

  /* 3) “Follow on Shop” button — kill the corporate blue */
  /* Targets links that go to shop.app inside footer */
  footer a[href*="shop.app"],
  footer a[href*="shop.app"]:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none !important;
    color: #0b0b0f !important;
    background: linear-gradient(90deg, #ff2aa7 0%, #7a5cff 60%, #00e5ff 100%);
    box-shadow:
      0 12px 28px rgba(122, 92, 255, .35),
      0 0 36px rgba(255, 42, 167, .32);
    border: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 1;
  }
  footer a[href*="shop.app"]:active,
  footer a[href*="shop.app"]:hover {
    filter: saturate(1.1) brightness(1.05);
    transform: translateY(-1px);
  }

  /* 4) Payment row — just lift it a bit without restyling logos */
  footer .footer__payment,
  footer .payment-icons {
    padding-top: 8px;
    position: relative; z-index: 1;
    filter: drop-shadow(0 8px 20px rgba(122, 92, 255, .18));
  }
}

@media (max-width: 990px) {

  /* Fix: Social icons too dark → boost glow */
  footer .list-social a,
  footer .list-social__link,
  footer .social-icons a {
    background: radial-gradient(circle at 50% 50%, rgba(255,0,160,.35) 0%, rgba(0,229,255,.25) 40%, rgba(10,10,14,.85) 70%);
    box-shadow:
      0 0 0 2px rgba(255, 0, 160, .3) inset,
      0 0 22px rgba(255, 0, 160, .45),
      0 0 38px rgba(0, 229, 255, .35);
  }

  /* Make the icon glyphs pure white & brighter */
  footer .list-social a svg,
  footer .social-icons a svg {
    fill: #fff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(255,0,200,.8));
  }

  /* Fix: Force “Follow on Shop” to Kami gradient */
  footer a[href*="shop.app"],
  footer a[href*="shop.app"]:visited {
    background: linear-gradient(90deg, #ff2aa7 0%, #7a5cff 60%, #00e5ff 100%) !important;
    color: #0b0b0f !important;
    font-weight: 800;
    border-radius: 14px;
    box-shadow:
      0 12px 28px rgba(122, 92, 255, .35),
      0 0 42px rgba(255, 42, 167, .38);
  }

  /* Hover feedback */
  footer a[href*="shop.app"]:hover {
    filter: brightness(1.08) saturate(1.1);
    transform: translateY(-2px);
  }
}

/* =========================
   KAMI MOBILE — footer polish
   ========================= */
@media (max-width: 990px){

  /* Country/region label – make readable + on-brand */
  footer .localization-form__label,
  footer .localization .select__label,
  footer .country-selector__label,
  footer label[for*="Country"],
  footer label[for*="country"]{
    color:#fff !important;
    letter-spacing:.04em;
    text-shadow:
      0 0 6px rgba(255, 42, 167,.55),
      0 0 16px rgba(0, 229, 255,.35);
  }

  /* Country/region select – neon frame + white text */
  footer .localization-form select,
  footer .localization .select__select,
  footer .localization-selector select,
  footer select[name*="country"],
  footer select[name*="locale"]{
    -webkit-appearance:none; appearance:none;
    background: linear-gradient(180deg, rgba(9,9,13,.88), rgba(9,9,13,.76));
    border:1.8px solid rgba(255,42,167,.65);
    box-shadow:
      0 0 18px rgba(255,42,167,.35),
      0 0 26px rgba(0,229,255,.25);
    color:#fff !important;
    font-weight:800;
    border-radius:14px;
    padding:14px 44px 14px 18px;
  }

  /* Custom arrow for the select (inline SVG so no asset needed) */
  footer .localization-form select,
  footer .localization .select__select,
  footer .localization-selector select{
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px 18px;
  }

  /* Options panel colors (where supported) */
  footer select option{
    background: #0b0b10;
    color:#fff;
  }

  /* “Follow on Shop” – force Kami gradient + glow */
  footer a[href*="shop.app"],
  footer a[href*="shop.app"]:visited,
  footer a[aria-label*="Follow on Shop" i],
  footer a[title*="Follow on Shop" i]{
    background: linear-gradient(90deg,#ff2aa7 0%,#7a5cff 60%,#00e5ff 100%) !important;
    color:#0b0b10 !important;
    font-weight:800;
    border-radius:14px !important;
    box-shadow:
      0 12px 28px rgba(122,92,255,.35),
      0 0 42px rgba(255,42,167,.38);
  }
  footer a[href*="shop.app"]:hover{
    filter:brightness(1.08) saturate(1.1);
    transform:translateY(-2px);
  }

  /* Social pucks – a touch more pop (keeps your current look) */
  footer .list-social a,
  footer .social-icons a{
    box-shadow:
      0 0 0 2px rgba(255,0,160,.30) inset,
      0 0 22px rgba(255,0,160,.38),
      0 0 34px rgba(0,229,255,.28);
  }
  footer .list-social a svg,
  footer .social-icons a svg{
    fill:#fff !important;
    filter:drop-shadow(0 0 6px rgba(255,0,200,.8));
  }
}

/* === KAMI MOBILE: force-visible Country/region === */
@media (max-width: 990px){

  /* 1) Make the label readable (some themes set opacity < 1) */
  footer form[action*="/localization"] label,
  footer .localization-form__label,
  footer .localization .select__label,
  footer .country-selector__label,
  footer label[for*="Country"],
  footer label[for*="country"]{
    color:#fff !important;
    opacity:1 !important;
    filter:none !important;
    letter-spacing:.04em;
    text-shadow:0 0 6px rgba(255,42,167,.6), 0 0 14px rgba(0,229,255,.35);
  }

  /* 2) Style the select wrapper (Shopify “.select” skin) */
  footer form[action*="/localization"] .select,
  footer .localization-form .select,
  footer .localization .select{
    background:linear-gradient(180deg, rgba(11,11,16,.92), rgba(11,11,16,.78)) !important;
    border:2px solid rgba(255,42,167,.7) !important;
    border-radius:14px !important;
    box-shadow:0 0 20px rgba(255,42,167,.35), 0 0 28px rgba(0,229,255,.25) !important;
  }

  /* 3) Force the actual <select> text to white on iOS */
  footer form[action*="/localization"] select,
  footer .localization-form select,
  footer .localization .select__select,
  footer .localization-selector select,
  footer select[name*="country"],
  footer select[name*="locale"]{
    -webkit-appearance:none; appearance:none;
    background:transparent !important;   /* let wrapper show */
    color:#fff !important;               /* normal browsers */
    -webkit-text-fill-color:#fff !important; /* iOS */
    font-weight:800;
    padding:14px 44px 14px 16px !important;
    border:none !important;
  }

  /* 4) Visible chevron (some themes hide the default) */
  footer form[action*="/localization"] .select__select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-size:18px 18px !important;
  }

  /* 5) Options sheet (where supported) */
  footer select option{
    color:#fff;
    background:#0b0b10;
  }
}

/* == KAMI: Mobile Country/Region selector fix + neon look == */
@media (max-width: 990px) {

  /* 1) The visible control (covers Dawn, legacy, and plain selects) */
  footer .localization-form select,
  footer select[name="country_code"],
  footer select[id*="Country"],
  footer .country-selector select,
  footer .select__select,
  footer .disclosure__button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background:
      linear-gradient(90deg, rgba(255,0,153,.35), rgba(0,255,255,.25)) padding-box,
      rgba(255,255,255,.22) border-box !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 14px 42px 14px 16px !important; /* room for caret */
    min-height: 46px;
    box-shadow:
      0 8px 26px rgba(255,0,153,.18),
      inset 0 0 24px rgba(255,255,255,.06) !important;
    text-shadow: 0 0 6px rgba(255,0,255,.25);
  }

  /* 2) Caret icon (multiple theme possibilities) */
  footer .localization-form .icon-caret,
  footer .select__select + svg,
  footer .country-selector .icon-caret,
  footer .disclosure__button .icon-caret,
  footer [class*="icon-caret"] {
    position: absolute;
    right: 14px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: #fff !important;
    opacity: .95;
    filter: drop-shadow(0 0 6px rgba(255,0,255,.6));
    pointer-events: none;
  }

  /* 3) Label “Country/region” */
  footer .localization-form label,
  footer .country-selector label,
  footer label[for*="Country"],
  footer [id*="Country"] ~ label {
    color: rgba(255,255,255,.9) !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,0,255,.35);
  }

  /* 4) Popover/list (if theme uses a disclosure list instead of native <select>) */
  footer .disclosure__list,
  footer [role="listbox"],
  footer .popover,
  footer .country-selector__list {
    background: radial-gradient(120% 120% at 10% 10%, rgba(255,0,153,.18), rgba(0,0,0,.86)) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
  }

  footer .disclosure__item,
  footer [role="option"] {
    color: #fff !important;
  }

  /* 5) Make sure container doesn’t clip shadows */
  footer .localization-form,
  footer .country-selector,
  footer .footer__localization {
    position: relative;
    overflow: visible;
  }
}

/* == KAMI: Force Country/Region visible on mobile/tablet (CSS-only) == */
@media (max-width: 990px) {
  /* make sure the block itself can float above backgrounds/overlays */
  footer, footer * { z-index: auto; }
  footer .footer__localization,
  footer .localization-form,
  footer .country-selector,
  footer .footer-block:last-child { position: relative; z-index: 5; }

  /* hit ANY select/disclosure that could be the country/locale */
  footer select,
  footer .select__select,
  footer .disclosure__button,
  footer [aria-controls*="country" i],
  footer [aria-controls*="localization" i],
  footer [name*="country" i],
  footer [name*="locale" i],
  footer [id*="country" i],
  footer [id*="locale" i] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background:
      linear-gradient(90deg, rgba(255,0,153,.35), rgba(0,255,255,.25)) padding-box,
      rgba(14,14,18,.72) border-box !important;
    border: 1.6px solid rgba(255,255,255,.55) !important;
    border-radius: 14px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* iOS */
    font-weight: 700;
    padding: 14px 42px 14px 14px !important;
    min-height: 46px;
    line-height: 1.2;
    box-shadow:
      0 8px 26px rgba(255,0,153,.18),
      inset 0 0 24px rgba(255,255,255,.06) !important;
    position: relative;
    z-index: 6; /* above any gradient layer */
  }

  /* caret variations */
  footer .icon-caret,
  footer .select__select + svg,
  footer .disclosure__button .icon-caret,
  footer [class*="icon-caret"] {
    position: absolute;
    right: 14px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    fill: #fff !important;
    opacity: .95;
    filter: drop-shadow(0 0 6px rgba(255,0,255,.6));
    pointer-events: none;
    z-index: 7;
  }

  /* popover/list styling if it’s a disclosure menu instead of a native select */
  footer .disclosure__list,
  footer [role="listbox"],
  footer .popover,
  footer .country-selector__list {
    background: radial-gradient(120% 120% at 10% 10%, rgba(255,0,153,.18), rgba(0,0,0,.86)) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
    z-index: 9999;
  }

  footer .disclosure__item,
  footer [role="option"] {
    color: #fff !important;
  }

  /* label text */
  footer label {
    color: rgba(255,255,255,.92) !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,0,255,.35);
  }
}

/* === KAMI: social icons premium pulse (mobile only) === */
@media (max-width: 990px){
  .km-social { gap: 18px; }

  .km-social__btn{
    animation: kmGlowPulse 3s ease-in-out infinite;
  }
}
@keyframes kmGlowPulse{
  0%,100% { box-shadow: 0 0 0 0 rgba(255,0,255,0.00), 0 0 0 0 rgba(0,224,255,0.00); }
  50%      { box-shadow: 0 0 18px 6px rgba(255,0,255,0.32), 0 0 28px 10px rgba(0,224,255,0.22); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .km-social__btn{ animation: none; }
}

/* === KAMI: footer fine-print readability (mobile) === */
@media (max-width: 990px){
  footer, .footer { --km-footer-text: rgba(255,255,255,0.86); }

  footer .copyright__content,
  footer .footer__content-bottom,
  footer .footer-block__details-content,
  footer small,
  footer p,
  footer a{
    color: var(--km-footer-text);
    text-shadow: 0 0 10px rgba(179,0,255,0.25), 0 0 20px rgba(0,224,255,0.18);
  }
  footer a:hover{
    color: #fff;
    text-shadow: 0 0 12px rgba(255,59,217,0.65), 0 0 26px rgba(0,234,255,0.55);
  }
}

/* === KAMI: drawer polish & performance (mobile) === */
@media (max-width: 990px){
  #km-menu-drawer{
    will-change: right, opacity;
    transition: right .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
    opacity: .75;
    -webkit-overflow-scrolling: touch;
  }
  #km-menu-drawer.open{ opacity: 1; }

  /* keep page from fighting scroll beneath drawer */
  html.km-no-scroll, body.km-no-scroll{
    overflow: hidden;
    touch-action: none;
  }

  /* slightly stronger glass when open */
  #km-menu-drawer.open::before{
    opacity: .95;                      /* you already added the gradient layer; this just nudges clarity */
    filter: blur(0px) saturate(1.1);
  }
}

/* === KAMI: unify Shop follow button (mobile) === */
@media (max-width: 990px){
  /* target the anchor/button container commonly rendered by Shop */
  .footer a[href*="shop.app"],
  a[href*="shop.app"]{
    display: inline-block;
    border-radius: 999px;
    padding: 6px 10px;                 /* wrapper breathing room */
    background: linear-gradient(90deg,#ff3bd9 0%, #7a3cff 50%, #00eaff 100%);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.07) inset,
                0 0 18px rgba(255,59,217,0.35),
                0 0 28px rgba(0,234,255,0.25);
  }
  /* don’t overpower on active tap */
  .footer a[href*="shop.app"]:active{
    transform: translateY(1px);
    filter: brightness(0.96);
  }
}

/* === KAMI: drawer visibility + click-through safety === */
@media (max-width: 990px){
  #km-menu-drawer{
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  #km-menu-drawer.open{
    opacity: 1;
    pointer-events: auto;
  }

  /* Close (X) must always be above everything */
  .km-menu-close{
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 10001;
    pointer-events: auto;
  }

  /* When drawer is open, really lock the page */
  html.km-no-scroll,
  body.km-no-scroll{
    overflow: hidden !important;
    height: 100%;
    touch-action: none;
  }
}

/* === Desktop Nav Hover Glow === */
@media (min-width: 1025px) {
  .kami-nav .kami-nav__link {
    position: relative;
    color: #fff;
    transition: color 0.3s ease;
  }

  .kami-nav .kami-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #ff00cc, #00ffff);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
  }

  .kami-nav .kami-nav__link:hover {
    color: #ff00ff;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.8);
  }

  .kami-nav .kami-nav__link:hover::after {
    width: 80%;
  }
}

/* === Hero Text Glow Desktop === */
@media (min-width: 1025px) {
  .hero__title {
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.8),
                 0 0 15px rgba(0, 255, 255, 0.6);
    animation: heroPulse 3s infinite alternate ease-in-out;
  }

  @keyframes heroPulse {
    from {
      text-shadow: 0 0 5px rgba(255, 0, 255, 0.7),
                   0 0 10px rgba(0, 255, 255, 0.5);
    }
    to {
      text-shadow: 0 0 15px rgba(255, 0, 255, 1),
                   0 0 25px rgba(0, 255, 255, 0.9);
    }
  }
}

/* === Footer Payment Logos === */
@media (min-width: 1025px) {
  .footer .payment-icons img {
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .footer .payment-icons img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  }
}

/* ================================
   DESKTOP • KAMI MODE – PREMIUM GOD-TIER
   (safe, fast hover FX + neon polish)
   ================================ */
@media (min-width: 1025px) {

  /* 0) Global smoothness & accessibility */
  :root{
    --km-pink:#ff4fd8;
    --km-cyan:#6df6ff;
    --km-deep:#0a0a12;
    --km-purple:#7a26ff;
  }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* 1) Header bar → subtle gradient + slight depth (no costly filters) */
  .kami-header{
    background: linear-gradient(180deg, rgba(10,10,18,.98), rgba(10,0,23,.98));
    box-shadow: 0 2px 16px rgba(0,0,0,.35);
    will-change: transform;
  }

  /* 2) Nav items → neon underline + micro-lift on hover */
  .kami-nav .kami-nav_link{
    position: relative;
    color:#fff;
    opacity:.92;
    transition: opacity .2s ease, transform .2s ease, text-shadow .2s ease;
    will-change: transform;
  }
  .kami-nav .kami-nav_link::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-6px;
    height:2px; border-radius:2px;
    background: linear-gradient(90deg, var(--km-pink), var(--km-cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
  }
  .kami-nav .kami-nav_link:hover{
    opacity:1;
    transform: translateY(-1px);
    text-shadow:
      0 0 6px rgba(255,79,216,.65),
      0 0 10px rgba(109,246,255,.45);
  }
  .kami-nav .kami-nav_link:hover::after{ transform: scaleX(1); }

  /* 3) Hero CTA button → confident neon ring + soft pulse */
  /* applies to common Shopify button classes; harmless if not present */
  .button, .button--primary{
    transition: transform .18s ease, box-shadow .24s ease, background-position .4s ease;
    will-change: transform, box-shadow;
  }
  .button--primary:hover,
  .button:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 0 2px rgba(255,255,255,.08) inset,
      0 0 10px rgba(255,79,216,.45),
      0 0 18px rgba(109,246,255,.35);
  }

  /* 4) Product cards → thin neon frame + lift on hover (fast shadows only) */
  .card{
    border-radius:18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .22s ease;
    will-change: transform, box-shadow;
  }
  .card::before{
    /* subtle 1px neon border without extra DOM */
    content:"";
    position:absolute; inset:0; border-radius:18px;
    padding:1px; /* border thickness */
    background: linear-gradient(135deg, rgba(255,79,216,.75), rgba(109,246,255,.75));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events:none;
  }
  .card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 6px 24px rgba(0,0,0,.35),
      0 0 20px rgba(122,38,255,.25);
  }

  /* 5) Footer – polish */
  /* Email input already styled; add arrow shimmer on hover */
  .footer .field__button, .footer .newsletter-form__button{
    transition: transform .18s ease, box-shadow .22s ease;
    will-change: transform, box-shadow;
  }
  .footer .field__button:hover,
  .footer .newsletter-form__button:hover{
    transform: translateY(-1px);
    box-shadow:
      0 0 10px rgba(255,79,216,.45),
      0 0 16px rgba(109,246,255,.35);
  }

  /* Social icons: soft neon on hover */
  .list-social a, .footer__social a{
    transition: filter .2s ease, transform .18s ease, box-shadow .2s ease;
    will-change: transform;
  }
  .list-social a:hover, .footer__social a:hover{
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(255,79,216,.35);
    filter: drop-shadow(0 0 6px rgba(109,246,255,.45));
  }

  /* Payment icons: muted → vivid on hover (cheap filters) */
  .payment-icons img, .footer__payment img{
    filter: saturate(.6) brightness(.95);
    transition: filter .2s ease, transform .18s ease;
  }
  .payment-icons img:hover, .footer__payment img:hover{
    filter: saturate(1) brightness(1);
    transform: translateY(-2px);
  }

  /* 6) Micro-performance helpers */
  .kami-nav, .card, .button, .button--primary{ backface-visibility:hidden; }
}

/* ================================
   DESKTOP ONLY: Neon social icons
   ================================ */
@media (min-width: 1025px) {
  /* Use your theme vars if present; harmless if already defined */
  :root{
    --km-pink: #ff4fd8;
    --km-cyan: #6df6ff;
  }

  /* Social list spacing (desktop only) */
  .list-social { gap: 16px; }

  /* Button-style wrappers for icons */
  .list-social a,
  .footer__social a{
    position: relative;
    display: inline-flex;
    width: 56px; height: 56px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    background:
      radial-gradient(120% 120% at 20% 20%, rgba(255,79,216,.22), rgba(109,246,255,.12) 50%, rgba(255,255,255,0) 70%),
      rgba(255,255,255,.02);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 6px 18px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .24s ease, filter .24s ease;
    will-change: transform, box-shadow;
  }

  /* Soft outer neon aura */
  .list-social a::after,
  .footer__social a::after{
    content:"";
    position: absolute; inset:-2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--km-pink), var(--km-cyan));
    opacity: .55;
    filter: blur(8px);
    z-index: -1;
    transition: opacity .25s ease;
    pointer-events: none;
  }

  /* SVG icons */
  .list-social a svg,
  .footer__social a svg{
    width: 22px; height: 22px;
    color: #fff;
    transition: transform .18s ease, filter .24s ease;
    will-change: transform;
  }

  /* Fallback for image icons (if your theme uses PNG/SVG img tags) */
  .list-social a img,
  .footer__social a img{
    width: 22px; height: 22px;
    filter: brightness(1) contrast(1.05);
    transition: transform .18s ease, filter .24s ease;
    will-change: transform;
  }

  /* Hover: lift + brighter neon */
  .list-social a:hover,
  .footer__social a:hover{
    transform: translateY(-4px);
    box-shadow:
      0 0 0 2px rgba(255,255,255,.08) inset,
      0 8px 26px rgba(0,0,0,.35),
      0 0 18px rgba(255,79,216,.40),
      0 0 26px rgba(109,246,255,.35);
  }
  .list-social a:hover::after,
  .footer__social a:hover::after{ opacity: .95; }

  .list-social a:hover svg,
  .footer__social a:hover svg{
    transform: translateY(-1px);
    filter:
      drop-shadow(0 0 6px rgba(255,79,216,.60))
      drop-shadow(0 0 10px rgba(109,246,255,.45));
  }

  .list-social a:hover img,
  .footer__social a:hover img{
    transform: translateY(-1px);
    filter:
      brightness(1.05) contrast(1.1)
      drop-shadow(0 0 6px rgba(255,79,216,.60))
      drop-shadow(0 0 10px rgba(109,246,255,.45));
  }
}

/* ===========================
   KAMI MODE — DESKTOP POLISH
   (desktop-only, safe for performance)
   =========================== */
@media (min-width: 1025px) {

  /* 1) Navbar: buttery hover + subtle neon */
  .kami-header .kami-nav_link {
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
    will-change: color, text-shadow, transform;
  }
  .kami-header .kami-nav_link:hover {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 122, 255, .6), 0 0 18px rgba(36, 196, 255, .45);
    transform: translateY(-1px);
  }

  /* 2) Footer "Subscribe" + labels: stronger contrast, luxe tracking */
  footer .footer__heading,
  footer .footer-block__heading,
  footer .newsletter-form__title,
  footer .footer-block__newsletter .form__label,
  footer .localization-form__label {
    color: #F2E6FF !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }

  /* 3) Email field CTA — keep it crisp but light on GPU */
  footer .newsletter-form .field__input {
    background: linear-gradient(90deg,#0b0b0f,#0b0b0f) !important;
    color: #fff !important;
  }
  footer .newsletter-form .button {
    /* subtle neon cap at the right */
    background: linear-gradient(135deg,#8a2be2 0%, #00d1ff 100%) !important;
    color: #fff !important;
    transition: transform .18s ease, filter .18s ease;
    will-change: transform, filter;
  }
  footer .newsletter-form .button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }

  /* 4) Social icons: center + mobile-style neon aura (GPU-friendly) */
  /* Works with Dawn-like markup: footer .list-social */
  footer .list-social {
    justify-content: center !important;
    gap: 24px !important;
    margin-top: 18px;
  }
  footer .list-social__link,
  footer .list-social a {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16,16,22,.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, filter .18s ease;
    will-change: transform, filter;
    /* Replace heavy box-shadow with GPU drop-shadows */
    filter: drop-shadow(0 0 10px rgba(138,43,226,.35))
            drop-shadow(0 0 22px rgba(0,209,255,.25));
    backdrop-filter: blur(2px);
  }
  footer .list-social__link svg,
  footer .list-social a svg {
    transform: translateZ(0);
  }
  /* glow ring */
  footer .list-social__link::before,
  footer .list-social a::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 30% 30%, rgba(255,110,255,.55) 0%, rgba(0,209,255,.35) 60%, transparent 100%);
    opacity: .85;
    transition: opacity .18s ease, transform .18s ease;
    will-change: opacity, transform;
    pointer-events: none;
  }
  footer .list-social__link:hover,
  footer .list-social a:hover {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 0 14px rgba(138,43,226,.55))
            drop-shadow(0 0 28px rgba(0,209,255,.35));
  }
  footer .list-social__link:hover::before,
  footer .list-social a:hover::before {
    opacity: 1;
    transform: scale(1.04);
  }

  /* 5) Product cards: tiny lift + soft neon edge (smooth) */
  .card,
  .product-card,
  .grid__item .card--standard {
    transition: transform .18s ease, filter .18s ease;
    will-change: transform, filter;
    /* swap heavy shadows for drop-shadows */
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
  }
  .card:hover,
  .product-card:hover,
  .grid__item .card--standard:hover {
    transform: translateY(-4px);
    filter:
      drop-shadow(0 6px 14px rgba(0,0,0,.2))
      drop-shadow(0 0 10px rgba(138,43,226,.22));
  }

  /* 6) Footer fine-tuning: center block width & spacing */
  footer .footer__content-bottom,
  footer .footer__content-top {
    max-width: min(1200px, 92vw);
    margin-inline: auto;
  }

  /* 7) Small performance wins */
  /* Avoid animating box-shadow anywhere on desktop to reduce paint cost */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .no-shadow-anim,
  .avoid-shadow-anim,
  .animated-shadow {
    box-shadow: none !important;
  }
}

/* === KAMI: desktop header scroll glass / nav polish === */
@media (min-width: 1000px) {
  .kami-header {
    transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
    will-change: backdrop-filter, box-shadow, background-color;
  }
  .kami-header.km-scrolled {
    background: rgba(0,0,0,.72);
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow:
      0 10px 30px rgba(213, 0, 255, .15),
      inset 0 -1px 0 rgba(255,255,255,.06);
  }

  /* Improve active/focus states without changing your existing hover glow */
  .kami-header .kami-nav_link[aria-current="page"],
  .kami-header .kami-nav_link.active {
    text-shadow: 0 0 18px #ff3bff, 0 0 32px #6ef3ff;
  }
  .kami-header .kami-nav_link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,59,255,.35);
    border-radius: 6px;
  }

  /* Refine the neon underline animation (keeps your glow, just smoother) */
  .kami-header .kami-nav_link { position: relative; }
  .kami-header .kami-nav_link::after {
    content:"";
    position:absolute; left:50%; bottom:-10px; transform:translateX(-50%) scaleX(0);
    width:64%; height:2px;
    background: linear-gradient(90deg,#ff37ff,#6ef3ff);
    box-shadow: 0 0 10px rgba(255,55,255,.6), 0 0 14px rgba(110,243,255,.6);
    transition: transform .22s ease;
  }
  .kami-header .kami-nav_link:hover::after {
    transform:translateX(-50%) scaleX(1);
  }

  /* Desktop social icons: tiny lift + glow on hover (matches mobile vibe) */
  .km-social a {
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform, box-shadow;
  }
  .km-social a:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 24px rgba(255,59,255,.35),
      0 0 40px rgba(110,243,255,.25);
  }
}

/* Respect “reduced motion” */
@media (prefers-reduced-motion: reduce) {
  .kami-header, .kami-header.km-scrolled,
  .kami-header .kami-nav_link::after,
  .km-social a { transition: none !important; }
}

/* === KAMI: Desktop performance & polish (no mobile impact) === */
@media (min-width: 1024px) {

  /* Create cheap GPU layers for heavy sections while scrolling */
  .kami-header,
  .image-banner,
  .image-banner__media img,
  .shopify-section,
  .product-grid,
  .component-card,
  .card {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  /* Reduce layout thrash in large sections */
  .shopify-section,
  .image-banner {
    contain: layout paint;
  }

  /* While the page is actively scrolling, temporarily use simpler shadows.
     (body.km-scrolling is toggled by the tiny JS below) */
  body.km-scrolling .component-card,
  body.km-scrolling .card {
    filter: none !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.16) !important;
  }

  /* Social icons: keep transitions cheap & smooth on desktop */
  .footer .social-icons a,
  .footer .social-icons button {
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
    will-change: transform, box-shadow, filter;
  }

  /* === Desktop menu: subtle neon underline sweep on hover/active === */
  .kami-nav_link {
    position: relative;
    transition: color .25s ease;
  }
  .kami-nav_link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;            /* keep under the text */
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #ff32b1 0%, #a000ff 100%);
    box-shadow:
      0 0 8px rgba(255, 50, 177, .9),
      0 0 16px rgba(160, 0, 255, .6);
    transition: width .28s ease;
    pointer-events: none;
  }
  .kami-nav_link:hover::after,
  .kami-nav_item.is-active .kami-nav_link::after {
    width: 100%;
  }
}

/* =========================
   DESKTOP PERFORMANCE BOOST
   (no layout/visual changes)
   ========================= */
@media (min-width: 1025px) {

  /* 1) Prevent “smooth scroll” jank on long pages */
  html { scroll-behavior: auto; }

  /* 2) Promote common big elements to GPU layers (cheap transforms only) */
  body,
  .kami-header,
  .km-drawer,
  .footer,
  .banner,
  .km-hero,
  .product-card {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* 3) Defer painting of off-screen sections (Chrome/Edge will use this; others ignore safely) */
  .shopify-section + .shopify-section {
    content-visibility: auto;
    contain-intrinsic-size: 1200px 1200px; /* rough placeholder size to avoid layout jump */
  }

  /* 4) Keep transitions cheap (avoid animating box-shadow/filter) */
  * {
    transition-property: transform, opacity, color, background-color, border-color;
  }

  /* 5) Small quality-of-life: hint to decode images normally (no sharpening hacks) */
  img { image-rendering: auto; }
}

/* Apply readability fix for laptop/desktop only */
@media screen and (min-width: 1024px) {
  .product-single__description, 
  .product-features, 
  .product-care-instructions {
    background: rgba(0, 0, 0, 0.6);  /* Semi-transparent black overlay */
    padding: 20px;
    border-radius: 10px;
    color: #ffffff !important;       /* Force pure white text */
    line-height: 1.6;                /* Improve readability */
  }

  .product-single__description h2, 
  .product-features h2, 
  .product-care-instructions h2 {
    color: #00ffea !important;       /* Neon cyan headers */
  }

  .product-single__description li, 
  .product-features li, 
  .product-care-instructions li {
    margin-bottom: 10px;             /* Extra spacing between bullets */
  }
}

/* ===== Readability panel for product text (DESKTOP ONLY) ===== */
@media (min-width: 1024px) {

  /* Target common product description / rich text containers across Dawn-like themes */
  .product__info-wrapper .rte,
  .product__info .rte,
  .product__description,
  .product-single__description,
  .product__accordion .rte,
  .product__info-container .rte {
    background: rgba(12, 0, 24, 0.78); /* deep purple glass */
    backdrop-filter: saturate(120%) blur(4px);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
    color: #fff !important;
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  }

  /* Ensure headings and list items are bright and spaced */
  .product__info-wrapper .rte h2,
  .product__info-wrapper .rte h3,
  .product__description h2,
  .product__description h3,
  .product-single__description h2,
  .product-single__description h3 {
    color: #ffffff !important;
    letter-spacing: 0.2px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .product__info-wrapper .rte p,
  .product__description p,
  .product-single__description p,
  .product__info-wrapper .rte li,
  .product__description li,
  .product-single__description li {
    color: #f5f5ff !important;
    line-height: 1.55;
  }

  .product__info-wrapper .rte ul,
  .product__description ul,
  .product-single__description ul {
    margin-left: 1rem;
  }

  .product__info-wrapper .rte li + li,
  .product__description li + li,
  .product-single__description li + li {
    margin-top: 6px;
  }

  /* Optional: tighten the right column width so lines are shorter (more readable) */
  .product__info-wrapper,
  .product__info-container {
    max-width: 560px;
  }
}

/* ==== PRODUCT DESCRIPTION – LAPTOP REFINEMENTS ==== */
@media (min-width: 1025px) {
  /* Constrain the right-side panel */
  .product__description,
  .product-single__description {
    max-width: 520px !important;
    margin-left: auto;
  }

  /* Typography & spacing inside the panel */
  .product__description h3,
  .product-single__description h3 {
    letter-spacing: 0.2px;
    margin-bottom: 8px;
  }

  .product__description p,
  .product__description li,
  .product-single__description p,
  .product-single__description li {
    color: #ffffff !important;
    font-size: 16.5px;
    line-height: 1.65;
  }

  .product__description ul,
  .product-single__description ul {
    margin: 10px 0 14px;
  }
  .product__description li + li,
  .product-single__description li + li {
    margin-top: 6px;
  }

  /* Card look & divider line */
  .product__description,
  .product-single__description {
    background: rgba(22, 3, 28, 0.92); /* deep plum */
    backdrop-filter: blur(2px);
    border-radius: 12px;
    padding: 18px 22px 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  /* Section separators inside the panel */
  .product__description hr,
  .product-single__description hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    margin: 14px 0;
  }

  /* Make the limited-drop alert pop a bit more */
  .product__description .limited-drop,
  .product-single__description .limited-drop {
    color: #ffd24d;
    font-weight: 700;
  }
}

/* ==== Product panel: laptop readability (product pages only) ==== */
@media (min-width: 1025px) {
  /* Works on Dawn and most OS2 themes */
  body.template-product .product__info-wrapper,
  body.template-product .product__info-container,
  body.template-product .product__column-sticky {
    position: relative;
  }

  /* The rich text area in the right column */
  body.template-product .product__info-wrapper .rte,
  body.template-product .product__info-container .rte,
  body.template-product .product__info-wrapper .product__description,
  body.template-product .product__info-container .product__description {
    max-width: 520px !important;
    margin-left: auto;
    background: rgba(22, 3, 28, 0.92);
    color: #fff !important;
    border-radius: 12px;
    padding: 18px 22px 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(2px);
  }

  /* Headings & text inside description */
  body.template-product .product__info-wrapper .rte h2,
  body.template-product .product__info-wrapper .rte h3,
  body.template-product .product__info-container .rte h2,
  body.template-product .product__info-container .rte h3 {
    color: #fff !important;
    margin: 0 0 8px;
    letter-spacing: .2px;
  }
  body.template-product .product__info-wrapper .rte p,
  body.template-product .product__info-wrapper .rte li,
  body.template-product .product__info-container .rte p,
  body.template-product .product__info-container .rte li {
    color: #fff !important;
    font-size: 16.5px;
    line-height: 1.65;
  }
  body.template-product .product__info-wrapper .rte ul,
  body.template-product .product__info-container .rte ul { margin: 10px 0 14px; }
  body.template-product .product__info-wrapper .rte li + li,
  body.template-product .product__info-container .rte li + li { margin-top: 6px; }

  /* Horizontal rule / section divider (if you use <hr>) */
  body.template-product .product__info-wrapper .rte hr,
  body.template-product .product__info-container .rte hr {
    border: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    margin: 14px 0;
  }

  /* Optional: emphasize your "Limited drop" line if it has this phrase */
  body.template-product .product__info-wrapper .rte :where(p,li):has(> strong):contains("Limited drop"),
  body.template-product .product__info-container .rte :where(p,li):has(> strong):contains("Limited drop") {
    color: #ffd24d !important;
    font-weight: 700;
  }
}
/* :contains() is non-standard; if your theme lints it out, ignore this block. */

/* Style the EU compliance block */
.product-single__description p:has(strong:contains("EU representative")),
.product-single__description p:has(strong:contains("Product information")),
.product-single__description p:has(strong:contains("Care instructions")) {
    font-size: 13px !important;   /* make text smaller */
    line-height: 1.4 !important;  /* tighter spacing */
    color: #cfcfcf !important;    /* softer gray to reduce visual weight */
    background: #1a1a1a !important; /* subtle dark background */
    padding: 12px 15px !important;
    border-radius: 6px !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* Optional: group them together as one clean block */
.product-single__description p:has(strong:contains("EU representative")) {
    border-top: 1px solid #333 !important;
}
.product-single__description p:last-child {
    border-bottom: 1px solid #333 !important;
}

/* Make headings (EU representative, Product info, Care) stand out slightly */
.product-single__description strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* MOBILE ONLY FIXES */
@media screen and (max-width: 749px) {
  .product-single__description,
  .rte {
    font-size: 16px !important;   /* bigger text */
    line-height: 1.8em !important; /* more breathing room */
    color: #ffffff !important;     /* brighter contrast */
    padding: 0 15px !important;    /* safe side padding */
  }

  .product-single__description h2,
  .product-single__description h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 18px !important;
    margin-bottom: 10px !important;
    color: #FFD700 !important;   /* golden headers */
  }

  .rte ul li {
    margin-bottom: 8px !important; /* clean bullet spacing */
  }

  .product-single__description {
    background: #180020 !important; /* deeper background for contrast */
    border-radius: 8px !important;
  }
}

/* Remove strikethrough on product titles - mobile only */
@media only screen and (max-width: 767px) {
  .product-single__title,
  h1.product-title,
  .product__title {
    text-decoration: none !important;
  }
}

/* MOBILE ONLY: remove any line/underline/divider around product titles */
@media (max-width: 767px) {
  .product-single__title,
  h1.product-title,
  h1.product__title,
  .product__title,
  .product__title * {
    text-decoration: none !important;
    background-image: none !important; /* kills gradient underlines */
  }

  /* kill pseudo-element dividers */
  .product-single__title::before,
  .product-single__title::after,
  h1.product-title::before,
  h1.product-title::after,
  h1.product__title::before,
  h1.product__title::after,
  .product__title::before,
  .product__title::after {
    content: none !important;
    display: none !important;
  }

  /* remove borders some themes place behind the title */
  .product__title-wrapper,
  .product__header,
  .product__title-block {
    border: 0 !important;
    background-image: none !important;
  }

  /* hide any hr that sits in the title block */
  .product__title-wrapper hr,
  .product__header hr,
  .product__title-block hr {
    display: none !important;
  }
}

/* ===== MOBILE-ONLY FIX for the random line across product title ===== */
@media (max-width: 767px) {

  /* Hide common slider/gallery progress bars & decorative dividers */
  .product__media [role="progressbar"],
  [role="progressbar"],
  .swiper-pagination-progressbar,
  .flickity-progress-bar,
  .glide__progress,
  .glide__track::after,
  .slider-progress,
  .slideshow__progress,
  .slideshow__progress-bar,
  .product__title-wrapper hr,
  .product__header hr,
  .product__title-block hr,
  .section-header hr {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
  }

  /* Some themes draw the line as a pseudo-element on the gallery or header */
  .product__media::before,
  .product__media::after,
  .product__header::before,
  .product__header::after,
  .product__title-wrapper::before,
  .product__title-wrapper::after {
    content: none !important;
    display: none !important;
  }

  /* Keep the title above any stray absolute elements just in case */
  .product-single__title,
  .product__title,
  h1.product-title,
  h1.product__title {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
  }
}

@media (max-width: 767px) {
  /* Hide any 1-3px tall full-width bars inside the product header area */
  .product__header * {
    background-image: none !important;
  }
  .product__header *:not(img):not(svg) {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

/* MOBILE ONLY */
@media (max-width: 768px) {
  /* keep the product title above any overlays */
  h1.product__title,
  h1.product-title,
  .product__title,
  .product-title {
    position: relative !important;
    z-index: 9999 !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    background-image: none !important;
  }

  /* kill common progress bars / dividers used by sliders */
  .swiper-pagination,
  .swiper-pagination-progressbar,
  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
  .flickity-progress,
  .flickity-progress-bar,
  .splide__progress,
  .splide__progress__bar,
  .slideshow__progress,
  .carousel__progress,
  .section-divider,
  .section--divider,
  hr,
  [role="separator"] {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* if your theme draws decorative lines via pseudo elements on headings */
  .product__title::before,
  .product__title::after,
  .product-title::before,
  .product-title::after {
    content: none !important;
    display: none !important;
  }

  /* MOBILE-ONLY: remove any lines/underlines around the product title */
@media (max-width: 768px) {
  /* common title selectors across Dawn/Printify blocks + fallbacks */
  h1[itemprop="name"],
  h1.product__title,
  h1.product-title,
  .product__title,
  .product-title {
    text-decoration: none !important;
    border: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* kill theme decorative pseudo-lines */
  h1[itemprop="name"]::before,
  h1[itemprop="name"]::after,
  h1.product__title::before,
  h1.product__title::after,
  h1.product-title::before,
  h1.product-title::after,
  .product__title::before,
  .product__title::after,
  .product-title::before,
  .product-title::after {
    content: none !important;
    display: none !important;
  }

  /* if a wrapper injects a divider */
  .product__title-wrapper,
  .product__title-block,
  .product__info-container,
  .product__header,
  .product__meta {
    border: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* kill stray <hr> near the title */
  .product__title hr,
  .product-title hr,
  .product__meta hr,
  .product__header hr {
    display: none !important;
  }

  /* make sure long headings don't draw text decorations */
  h1[itemprop="name"] *,
  h1.product__title *,
  h1.product-title * {
    text-decoration: none !important;
  }
}

/* Fix Printify title strike line on mobile */
@media only screen and (max-width: 768px) {
  .product__title::before,
  .product__title::after {
    display: none !important;
    content: none !important;
  }
  
  .product__title {
    text-decoration: none !important;
  }
}

/* Kill the rogue title line on PRODUCT pages (mobile only) */
@media (max-width: 768px) {
  /* Scope to product templates */
  .template-product h1,
  .template-product .product__title,
  .template-product .ProductMeta__Title { 
    text-decoration: none !important;
    background: none !important;
    border-bottom: 0 !important;
  }

  /* Nuke common “decorator” elements and pseudo-elements */
  .template-product h1::before,
  .template-product h1::after,
  .template-product .product__title::before,
  .template-product .product__title::after,
  .template-product .ProductMeta__Title::before,
  .template-product .ProductMeta__Title::after,
  .template-product .product__title + hr,
  .template-product .ProductMeta__Title + hr,
  .template-product hr,
  .template-product .divider,
  .template-product .underline,
  .template-product .heading-line {
    display: none !important;
    content: none !important;
  }
}

/* Remove green focus ring/line on mobile (touch devices only) */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  *:focus,
  *:focus-visible,
  .focus,
  .is-focused,
  [data-focus-ring] {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  /* Some themes draw focus via pseudo elements—nuke those too */
  *:focus::before,
  *:focus::after,
  *:focus-visible::before,
  *:focus-visible::after {
    content: none !important;
    display: none !important;
  }

  /* iOS tap highlight (gray/colored overlay) */
  a, button, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: transparent;
  }
}

/* MOBILE ONLY — remove decorative dividers/underlines on product & collection */
@media (max-width: 768px) {
  .template-product hr,
  .template-collection hr,
  .template-product [role="separator"],
  .template-collection [role="separator"],
  .template-product .divider,
  .template-collection .divider,
  .template-product [class*="divider"],
  .template-collection [class*="divider"],
  .template-product [class*="separator"],
  .template-collection [class*="separator"],
  .template-product [class*="underline"]::before,
  .template-product [class*="underline"]::after,
  .template-collection [class*="underline"]::before,
  .template-collection [class*="underline"]::after,
  .template-product h1::before,
  .template-product h1::after,
  .template-collection h1::before,
  .template-collection h1::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
  }
}

/* MOBILE only: kill the exact culprit */
@media (max-width: 768px){
  /* replace .YOUR-SELECTOR with what you copied */
  .YOUR-SELECTOR,
  .YOUR-SELECTOR::before,
  .YOUR-SELECTOR::after { display:none !important; content:none !important; height:0 !important; }
}

/* ===== MOBILE-ONLY: kill any stray horizontal lines on collection/product pages ===== */
@media (max-width: 768px){

  /* 1) Kill classic separators everywhere on phones */
  hr, .hr,
  .divider, .section-divider, .product-divider, .collection-divider,
  [class*="divider"], [class*="separator"], [class*="rule"] {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* 2) If the line is painted by pseudo-elements (very common) */
  .divider::before, .divider::after,
  .section-divider::before, .section-divider::after,
  [class*="divider"]::before, [class*="divider"]::after,
  [class*="separator"]::before, [class*="separator"]::after,
  .product__title::before, .product__title::after,
  .card-information__text::before, .card-information__text::after {
    content: none !important;
    display: none !important;
  }

  /* 3) If the “line” is an underline trick (background-image) on headings/links */
  h1, h2, h3, h4, h5, h6,
  .product__title, .product__title *,
  .card-information__text, .card-information__text a,
  .collection-hero__title, .collection-hero__title * {
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 4) Some themes draw a thin top/bottom border on sections/cards */
  .section, section, .page-width, .product, .collection, .card, .card--product {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }
}

/* === FINAL NUKE: remove all stray lines on mobile for product + collection === */
@media (max-width: 768px){
  /* Limit blast radius to product + collection pages only */
  .template-product *, .template-collection *,
  .template-product *::before, .template-collection *::before,
  .template-product *::after,  .template-collection *::after{
    /* kill borders & fake rules */
    border: 0 !important;
    /* kill gradient underlines / decorative bg lines */
    background-image: none !important;
    /* kill 1px “rule” shadows some themes use */
    box-shadow: none !important;
    /* kill text underlines masquerading as separators */
    text-decoration: none !important;
  }

  /* classic <hr> or divider classes if any survived */
  .template-product hr, .template-collection hr,
  .template-product .divider, .template-collection .divider,
  .template-product [class*="divider"], .template-collection [class*="divider"],
  .template-product [class*="separator"], .template-collection [class*="separator"],
  .template-product [class*="rule"], .template-collection [class*="rule"]{
    display: none !important;
    height: 0 !important;
  }
}

/* cache-bust v3 */

/* MOBILE HOTFIX — kill any line/outline on titles & product cards */
@media (max-width: 768px){
  /* No strikethrough/underline anywhere in titles or links inside titles */
  h1, h2, h3, h4, h5, h6,
  .product__title, .product__title *,
  .card__heading, .card__heading *,
  .collection-hero__title, .collection-hero__title *,
  .full-unstyled-link {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-thickness: 0 !important;
    text-decoration-color: transparent !important;
    border: 0 !important;
    background-image: none !important;
  }

  /* Kill focus outlines/box-shadows that can render as neon lines on iOS */
  :focus, :focus-visible,
  a:focus, a:focus-visible,
  .full-unstyled-link:focus, .full-unstyled-link:focus-visible,
  .product__title:focus, .card__heading:focus, .collection-hero__title:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Remove pseudo-elements often used as “dividers” */
  .product__title::before, .product__title::after,
  .card__heading::before, .card__heading::after,
  .collection-hero__title::before, .collection-hero__title::after {
    content: none !important;
    display: none !important;
  }
}
/* v-mobile-hotfix-1 */

/* --- iOS mobile artifact fix -------------------------------------------- */
@media (max-width: 749px){
  /* 1) Remove fixed backgrounds (the root cause) */
  body.gradient,
  .gradient {
    background-attachment: scroll !important;   /* was: fixed */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /* 2) Prevent subpixel seams on composited layers */
  html, body { overflow-x: hidden !important; }

  .shopify-section,
  .template-product,
  .template-collection,
  .page-width,
  .product,
  .collection,
  .card,
  .grid {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
}

@media (max-width: 749px){
  body.gradient,
  .gradient {
    background-image: none !important;           /* disable gradient on mobile */
    background-color: #1a0222 !important;        /* pick a close solid tone */
  }
}

/* ---- MOBILE TEXT LEGIBILITY FIX (iOS) ------------------------------- */
@media (max-width: 749px){
  /* Stop fancy blends that need the gradient */
  .title, .h0, .h1, .h2, .h3, .product__title,
  .card-information__text, .full-unstyled-link,
  .price, .price-item, .price-item--regular,
  .collection-hero__title, .section-header__title {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    color: #EAD8FF !important;        /* light lilac that matches your palette */
    text-shadow: 0 0 1px rgba(0,0,0,.25); /* tiny lift on dark bg */
  }

  /* If any headings used gradient-as-text (background-clip) */
  .text-gradient, .title--gradient {
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Product cards: titles & prices in grid */
  .card__information .card-information__text,
  .card__information .price-item {
    color: #EAD8FF !important;
  }

  /* Product page title & price */
  .product .product__title,
  .product .price__regular,
  .product .price-item--regular {
    color: #EAD8FF !important;
  }
}

/* --- iOS focus ring around product media (mobile only) --- */
@media (max-width: 749px){
  /* remove tap highlight too */
  .product__media, .product__media-wrapper, .media, .product__media-list {
    -webkit-tap-highlight-color: transparent;
  }

  /* hide focus outline just for media controls/links */
  .product__media button:focus,
  .product__media button:focus-visible,
  .product__media a:focus,
  .product__media a:focus-visible,
  .media button:focus,
  .media button:focus-visible,
  .media a:focus,
  .media a:focus-visible,
  .product__media-toggle:focus,
  .product__media-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* --- Mobile: remove focus ring around product media controls --- */
@media (max-width: 749px) {
  /* iOS tap flash */
  .product__media,
  .product__media-wrapper,
  .product__media-list,
  .media { -webkit-tap-highlight-color: transparent; }

  /* Kill Dawn's focus styles just inside the media area */
  .product__media *:focus,
  .product__media *:focus-visible,
  .product__media *:focus-within,
  .product__media .focus-inset:focus,
  .product__media .focus-inset:focus-visible,
  .product__media .focus-outline:focus,
  .product__media .focus-outline:focus-visible,
  .product__media .slider-button:focus,
  .product__media .slider-button:focus-visible,
  .product__media .product__media-toggle:focus,
  .product__media .product__media-toggle:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline-offset: 0 !important;
  }
}
@media (max-width: 749px) {
  .product__media .product__media-toggle { display: none !important; }
}

/* --- Mobile: kill pink/purple focus rectangles --- */
@media (max-width: 749px) {
  *:focus,
  *:focus-visible,
  *:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  /* Kill highlight Safari adds on taps */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* v10 */

/* Kill iOS focus box from Skip-to-content on mobile only */
@media (max-width: 749px) {
  a.skip-to-content-link,
  a.skip-to-content-link:focus,
  a.skip-to-content-link:focus-visible,
  a.skip-to-content-link:focus-within {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Nuke any pseudo-element rings some themes use */
  a.skip-to-content-link::before,
  a.skip-to-content-link::after {
    content: none !important;
    display: none !important;
  }
}

/* MOBILE POLISH — optional */
@media (max-width: 749px) {
  /* Shorter H1 + better wrap */
  .product__title {
    font-size: 28px;        /* was quite tall */
    line-height: 1.1;
    letter-spacing: 0.2px;  /* less spread = denser title */
    text-transform: none;   /* keep case readable; remove if you want caps */
  }

  /* Tight, readable bullets */
  .product__description p,
  .product__description li { 
    margin: 8px 0 !important; 
  }

  /* Condense materials line */
  .product__description em { font-style: normal; }

  /* Variant pills: bigger tap targets */
  .product-form__input input+label {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Hide noisy “seam thread color” line on PDP */
  .product-form__input [data-product-information*="Seam thread"],
  .product__info-container :is(.product__text, .product__tax) + .product-form__input .product-form__input__info {
    display: none !important;
  }

  /* CTA stack spacing */
  .product-form__buttons > * { margin-top: 10px; }

  /* Cart drawer: tighter content */
  .cart-drawer .cart-item__name { line-height: 1.2; }
}

/* Optional: replace ' | ' with ' – ' automatically in titles */
.product__title { word-break: break-word; }

@keyframes neonPulse {
  0%, 100% { filter: drop-shadow(0 0 2px #ff00ff) drop-shadow(0 0 10px #ff00ff); }
  50% { filter: drop-shadow(0 0 6px #ff00ff) drop-shadow(0 0 20px #ff00ff); }
}

.header__heading-logo img {
  animation: neonPulse 3s infinite ease-in-out;
}

/* MOBILE LOGO ANIM — Dawn robust */
@media (max-width: 768px) {
  /* catch all variants of the logo */
  .header__heading-logo,
  .header__heading-logo img,
  .header__heading-logo svg {
    display: inline-block !important;
    will-change: transform, filter;
    animation:
      neonPulse 3s ease-in-out infinite,
      drift 14s ease-in-out infinite !important;
  }

  /* Dawn sometimes puts .motion-reduce on the logo — force override */
  .header__heading-logo.motion-reduce,
  .header__heading-logo img.motion-reduce,
  .header__heading-logo svg.motion-reduce {
    animation:
      neonPulse 3s ease-in-out infinite,
      drift 14s ease-in-out infinite !important;
  }

  @keyframes neonPulse {
    0%,100% { filter: drop-shadow(0 0 2px #ff00ff) drop-shadow(0 0 10px #ff00ff); }
    50%     { filter: drop-shadow(0 0 6px #ff00ff) drop-shadow(0 0 20px #ff00ff); }
  }

  @keyframes drift {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-1px) rotate(-0.2deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }
}

@media (max-width: 768px) {
  .header__heading-logo img,
  .header__heading-logo svg {
    animation:
      neonPulse 3s ease-in-out infinite,
      drift 14s ease-in-out infinite,
      glitchFlash 5s steps(1, end) infinite !important;
  }
  @keyframes glitchFlash {
    0%,96%,100% { filter: none; }
    97%         { transform: translate(1px,-1px); }
    98%         { transform: translate(-1px,1px); }
    99%         { transform: translate(0,0) hue-rotate(20deg) saturate(1.3); }
  }
}

@media (max-width:768px){
  .header__heading-logo, .header__heading-logo img, .header__heading-logo svg { outline: 1px solid lime !important; }
}

/* --- Cart drawer must sit above any page overlays/gradients (desktop) --- */
@media (min-width: 990px) {
  /* Dawn drawer/cart variants */
  .cart-drawer,
  .cart-drawer__inner,
  .drawer,
  .drawer__inner,
  .cart-popup,
  .cart-drawer__header,
  .cart-drawer__contents,
  .cart-drawer__footer {
    position: relative;
    z-index: 100010 !important;
  }

  /* Any dim/overlay layers should sit below the drawer */
  .cart-drawer__overlay,
  .drawer__overlay,
  .page-overlay,
  .overlay,
  .modal-overlay {
    z-index: 10000 !important; /* lower than drawer */
  }

  /* If your theme’s global gradient is the culprit, neuter it while drawer is open */
  body.js-drawer-open .gradient::before,
  body.js-drawer-open .gradient::after {
    opacity: 0 !important;      /* or display:none if you prefer */
    pointer-events: none !important;
  }
}

/* --- Fix cart drawer vertical alignment on desktop --- */
@media (min-width: 990px) {
  .cart-drawer,
  .drawer,
  .cart-drawer__inner,
  .drawer__inner {
    top: 0 !important;         /* align to top of viewport */
    height: 100vh !important;  /* take full height */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* content starts from top */
    overflow-y: auto !important; /* scrollable if content is taller */
  }

  /* Make sure header + footer inside drawer don’t cut off */
  .cart-drawer__contents {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
  }
}

/* Desktop-only cart drawer fix (Dawn) */
@media (min-width: 990px) {
  /* Make sure the drawer is visible, full height, and aligned */
  cart-drawer .drawer,
  .cart-drawer .drawer {
    width: min(420px, 92vw);
    height: 100vh;
    top: 0;
    right: 0;
    left: auto;
    transform: translateX(0) !important;
    z-index: 9999;
  }

  /* Give the inside a bit more top breathing room so the content isn’t cut */
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    padding-top: 24px;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Ensure the “open” state never gets overridden */
  cart-drawer[open] .drawer,
  .cart-drawer.is-open .drawer {
    transform: translateX(0) !important;
  }
}

/* Desktop cart drawer: push down below browser/header and keep fully visible */
@media (min-width: 990px) {

  /* 1) Offset the drawer from the very top (accounts for Safari UI + any sticky header) */
  :root{ --cart-top-offset: calc(env(safe-area-inset-top, 0px) + 28px); }

  cart-drawer .drawer,
  .cart-drawer .drawer{
    top: var(--cart-top-offset) !important;
    right: 0;
    left: auto;
    transform: translateX(0) !important;
    height: calc(100vh - var(--cart-top-offset)) !important;
    max-height: calc(100vh - var(--cart-top-offset)) !important;
    z-index: 9999;
  }

  /* 2) Ensure inner content scrolls instead of clipping at the top */
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner{
    padding-top: 20px;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3) Guard the “open” state so any theme JS can’t slide it off-screen */
  cart-drawer[open] .drawer,
  .cart-drawer.is-open .drawer{
    transform: translateX(0) !important;
  }
}

/* Desktop cart drawer position fix */
@media (min-width: 990px) {
  cart-drawer .drawer,
  .cart-drawer .drawer {
    top: 60px !important;              /* force it lower */
    right: 0;
    left: auto;
    transform: translateX(0) !important;
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    z-index: 9999;
  }

  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    padding-top: 15px !important;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  cart-drawer[open] .drawer,
  .cart-drawer.is-open .drawer {
    transform: translateX(0) !important;
  }
}

/* Desktop-only: fix cart drawer being too high */
@media (min-width: 990px) {
  cart-drawer .drawer,
  .cart-drawer .drawer {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;

    /* Put it clearly below the header / browser UI */
    top: calc(96px + env(safe-area-inset-top)) !important; /* tweak 96 → 80/120 as needed */
    bottom: 0 !important;

    /* Kill theme animations that shove it upward */
    transform: none !important;

    /* Fit remaining viewport height */
    height: auto !important;
    max-height: calc(100vh - (96px + env(safe-area-inset-top))) !important;
    z-index: 9999 !important;
  }

  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: 100% !important;
    overflow-y: auto !important;
    padding-top: 12px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure open state doesn't re-apply a translate */
  cart-drawer[open] .drawer,
  .cart-drawer.is-open .drawer {
    transform: none !important;
  }
}

/* Desktop only – lower the cart drawer */
@media (min-width: 990px) {
  /* Tell Dawn where the header “bottom” is */
  :root {
    --header-bottom-position: 120px !important; /* try 120; tweak to 100–140 if needed */
  }

  /* Ensure no JS/CSS animation pulls it up */
  cart-drawer .drawer,
  .cart-drawer .drawer {
    transform: none !important;
    inset: var(--header-bottom-position) 0 0 auto !important; /* respect the new var */
    max-height: calc(100vh - var(--header-bottom-position)) !important;
  }

  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: 100% !important;
    overflow-y: auto !important;
  }
}

/* Desktop only – position the cart drawer lower */
@media (min-width: 990px) {
  :root { --header-bottom-position: 140px !important; } /* tweak 120–160 to taste */

  /* Cover common Dawn variants */
  #CartDrawer,
  cart-drawer,
  .cart-drawer,
  #CartDrawer.drawer,
  cart-drawer.drawer,
  .cart-drawer.drawer {
    inset: var(--header-bottom-position) 0 0 auto !important;
    top: var(--header-bottom-position) !important;
    height: calc(100vh - var(--header-bottom-position)) !important;
    transform: none !important;
  }

  /* Ensure the inner scroll area fills the new height */
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }
}

/* Desktop only: show cart drawer and push it down a bit */
@media (min-width: 990px) {

  /* Force the drawer to be visible and on-screen */
  #CartDrawer,
  cart-drawer,
  .cart-drawer {
    position: fixed !important;
    inset: 120px 0 0 auto !important; /* top | right | bottom | left */
    width: min(420px, 95vw) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  /* Dawn variants that rely on [open] / .is-open to slide in */
  #CartDrawer[open],
  cart-drawer[open],
  .cart-drawer.is-open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Make inner area scroll correctly with the new top offset */
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }
}

/* ===== Desktop-only cart drawer fix (Dawn) ===== */
@media (min-width: 990px) {
  /* Force the drawer to be fully on-screen and start below the header */
  #CartDrawer,
  cart-drawer,
  .cart-drawer {
    position: fixed !important;
    top: 120px !important;         /* <<< move down under header; tweak this number */
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(420px, 95vw) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  /* Dawn opens the drawer via [open]/.is-open — keep it visible when opened */
  #CartDrawer[open],
  cart-drawer[open],
  .cart-drawer.is-open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Make inner content scroll within the new height */
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: calc(100vh - 120px) !important;   /* match the top offset above */
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }

  /* Ensure the page overlay doesn't block clicks */
  .drawer__overlay,
  .cart-drawer__overlay,
  body:has(#CartDrawer[open]) .overlay {
    z-index: 9999 !important;
  }
}

/* ===== Desktop-only cart drawer FIX ===== */
@media (min-width: 990px) {
  cart-drawer,
  #CartDrawer,
  .cart-drawer {
    position: fixed !important;
    top: 100px !important;            /* adjust this until it clears your header */
    right: 0 !important;
    bottom: 0 !important;
    width: 400px !important;          /* standard width */
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  cart-drawer .drawer__inner,
  #CartDrawer .drawer__inner,
  .cart-drawer .drawer__inner {
    height: calc(100vh - 100px) !important;  /* matches the top offset */
    overflow-y: auto !important;
  }
}

/* Desktop-only: give cart drawer content a dynamic top offset (no position hacks) */
@media (min-width: 990px){
  .km-cd { z-index: 9999 !important; } /* keep it above header */
  .km-cd .drawer__inner{
    height: calc(100vh - var(--km-header-h, 0px)) !important;
    overflow-y: auto !important;
  }
  /* Push the drawer content down by header height */
  .km-cd .drawer__contents,
  .km-cd .cart-drawer__inner-container{
    padding-top: var(--km-header-h, 0px) !important;
  }
}

/* Desktop-only cart drawer fix */
@media (min-width: 990px){
  .cart-drawer,
  #CartDrawer,
  cart-drawer {
    z-index: 9999 !important;
  }

  /* Force drawer inner container visible + scrollable */
  .cart-drawer__inner,
  .drawer__inner {
    padding-top: var(--km-header-h, 70px) !important;
    overflow-y: auto !important;
    height: auto !important; /* stop it collapsing */
    min-height: 100vh !important; 
  }
}

@media (min-width: 990px){
  .km-drawer-spacer { height: 90px; } /* adjust until it clears the header */
}

/* Desktop cart drawer offset */
@media (min-width: 990px){
  .km-drawer-spacer{ height: 160px; }  /* try 160–200px */
}

/* DESKTOP: keep cart drawer below sticky header */
@media (min-width: 990px){
  /* push the drawer content down */
  #CartDrawer .drawer__inner{
    padding-top: 180px !important;   /* try 160–220px depending on header height */
    box-sizing: border-box;
  }
  /* smooth scroll targets inside the drawer */
  #CartDrawer *{ scroll-margin-top: 180px; }
}

/* Desktop: push cart drawer lower under the sticky header */
@media (min-width: 990px){
  :root{ --km-drawer-offset: 240px; }   /* try 240–280px */

  cart-drawer .drawer__inner{
    padding-top: var(--km-drawer-offset) !important;
    box-sizing: border-box;
  }

  /* if anything inside jumps to anchors, keep it below header too */
  cart-drawer *{ scroll-margin-top: var(--km-drawer-offset); }
}

/* Desktop only: shift cart drawer lower under header */
@media (min-width: 990px){
  :root {
    --km-drawer-offset: 260px;   /* adjust 240–280px until perfect */
  }

  cart-drawer .drawer__inner {
    padding-top: var(--km-drawer-offset) !important;
    height: calc(100vh - var(--km-drawer-offset)) !important; 
    box-sizing: border-box;
    overflow-y: auto; /* ensures scroll if content taller than viewport */
  }

  cart-drawer * {
    scroll-margin-top: var(--km-drawer-offset);
  }
}

/* Desktop: Improve cart drawer text contrast */
@media (min-width: 990px) {
  cart-drawer, #CartDrawer {
    color: #ffffff !important; /* make all text white */
  }

  cart-drawer .drawer__inner, 
  #CartDrawer .drawer__inner {
    color: #f5f5f5 !important; /* light grey for softer body text */
  }

  cart-drawer h2, 
  #CartDrawer h2,
  cart-drawer .cart__empty-text,
  #CartDrawer .cart__empty-text,
  cart-drawer .cart-item__name,
  #CartDrawer .cart-item__name {
    color: #ffffff !important; /* ensure headings/product names pop */
    font-weight: 600;
  }

  cart-drawer .cart__footer,
  #CartDrawer .cart__footer {
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.2); /* subtle separation */
  }

  cart-drawer .price, 
  #CartDrawer .price {
    color: #ff4df2 !important; /* neon pink for prices */
    font-weight: 700;
  }

  cart-drawer .cart__note,
  #CartDrawer .cart__note,
  cart-drawer .cart__note label,
  #CartDrawer .cart__note label {
    color: #ccc !important; /* softer for note/instructions */
  }
}

/* --- Desktop only: make cart-drawer text pop on dark gradient --- */
@media (min-width: 990px){
  /* kill any inherited opacity / blend that fades text */
  cart-drawer, #CartDrawer,
  cart-drawer .drawer, #CartDrawer .drawer,
  cart-drawer .drawer__inner, #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* darker base behind content for contrast */
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner{
    background: linear-gradient(180deg, rgba(10,0,18,0.96), rgba(40,0,52,0.97)) !important;
  }

  /* headline + product name */
  #CartDrawer h2,
  cart-drawer h2,
  #CartDrawer .cart-item__name,
  cart-drawer .cart-item__name{
    color: #fff !important;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(255,77,242,.28); /* subtle neon lift */
  }

  /* meta (color, size, labels) */
  #CartDrawer .product-option,
  cart-drawer .product-option,
  #CartDrawer .cart-item__media + div,
  cart-drawer .cart-item__media + div{
    color: #dcd6e9 !important;
  }

  /* prices & totals */
  #CartDrawer .price, 
  cart-drawer .price,
  #CartDrawer .totals__subtotal-value,
  cart-drawer .totals__subtotal-value{
    color: #ff4df2 !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,77,242,.35);
  }

  /* optional: add a faint panel behind items for even more clarity */
  #CartDrawer .cart-items,
  cart-drawer .cart-items{
    background: rgba(0,0,0,.18);
    border-radius: 12px;
    padding: 8px;
  }
}

/* DESKTOP ONLY — make cart-drawer text 100% readable */
@media (min-width: 990px){

  /* solid dark layer behind the gradient */
  cart-drawer .drawer__inner,
  #CartDrawer .drawer__inner{
    position: relative !important;
    isolation: isolate;           /* keep overlay beneath content */
  }
  cart-drawer .drawer__inner::before,
  #CartDrawer .drawer__inner::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,#0b0014 0%, #220033 100%);
    opacity: .88;                 /* increase if you want it even darker */
    pointer-events: none;
    z-index: 0;
  }
  /* ensure actual content sits above the overlay */
  cart-drawer .drawer__inner > *,
  #CartDrawer .drawer__inner > *{
    position: relative;
    z-index: 1;
  }

  /* kill any fading/blending that makes text look washed out */
  cart-drawer, #CartDrawer,
  cart-drawer * , #CartDrawer * {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  /* high-contrast text/colors */
  #CartDrawer h2, cart-drawer h2,
  #CartDrawer .cart-item__name, cart-drawer .cart-item__name{
    color: #fff !important;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(255,77,242,.28);
  }
  #CartDrawer .product-option, cart-drawer .product-option{
    color: #e9e1ff !important;
  }
  #CartDrawer .price, cart-drawer .price,
  #CartDrawer .totals__subtotal-value, cart-drawer .totals__subtotal-value{
    color: #ffffff !important;
    font-weight: 700;
  }
}

/* Desktop only: improve cart text visibility */
@media (min-width: 990px){
  cart-drawer .drawer__inner,
  cart-drawer .drawer__inner * {
    color: #ffffff !important;       /* bright white text */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* glow for readability */
  }

  cart-drawer .price,
  cart-drawer .totals,
  cart-drawer .product-option {
    font-weight: 600 !important;     /* bolder text */
    color: #ffffff !important;
  }

  cart-drawer .drawer__header,
  cart-drawer .drawer__footer {
    border-color: rgba(255,255,255,0.3) !important;
  }
}

/* Desktop only – match mobile cart text styling */
@media (min-width: 990px){
  #CartDrawer .drawer__inner{
    color: #ffffff !important; /* default text white */
  }

  #CartDrawer h2,
  #CartDrawer .totals__subtotal,
  #CartDrawer .totals__subtotal-value,
  #CartDrawer .price{
    color: #ffffff !important; 
    font-weight: 700 !important; /* strong like mobile */
  }

  #CartDrawer .cart-item__name,
  #CartDrawer .cart-item__details,
  #CartDrawer .tax-note,
  #CartDrawer .cart-note__label{
    color: #e0e0e0 !important; /* softer gray for secondary text */
  }

  #CartDrawer .drawer__heading{
    color: #bb86fc !important; /* purple heading, like mobile */
    font-weight: 700 !important;
  }

  #CartDrawer .button,
  #CartDrawer .button *{
    color: #fff !important;
  }
}

/* Desktop only – force cart text to be visible like mobile */
@media (min-width: 990px){

  #CartDrawer,
  #CartDrawer .drawer__inner,
  #CartDrawer * {
    color: #fff !important;
  }

  #CartDrawer .drawer__heading,
  #CartDrawer h2,
  #CartDrawer .totals__subtotal,
  #CartDrawer .totals__subtotal-value {
    color: #bb86fc !important; /* purple headings */
    font-weight: 700 !important;
  }

  #CartDrawer .cart-item__name {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  #CartDrawer .cart-item__details,
  #CartDrawer .tax-note,
  #CartDrawer .cart-note__label {
    color: #e0e0e0 !important; /* softer gray for secondary */
  }

  #CartDrawer .price,
  #CartDrawer .totals__subtotal-value {
    color: #ffffff !important;
    font-weight: 700 !important;
  }
}

/* Desktop only – force high-contrast cart drawer text */
@media (min-width: 990px){

  /* Make all cart drawer text readable regardless of scheme */
  #CartDrawer {
    /* Dawn uses these CSS vars everywhere for text colors */
    --color-foreground: 255,255,255 !important;
    --color-foreground-90: 255,255,255 !important;
    --color-foreground-85: 255,255,255 !important;
    --color-foreground-75: 255,255,255 !important;
    --color-foreground-70: 255,255,255 !important;
    --color-foreground-55: 224,224,224 !important;
    --color-link: 255,255,255 !important;
  }

  /* Kill any dimming/opacity/mix effects applied to the drawer */
  #CartDrawer .drawer__inner,
  #CartDrawer .drawer__contents,
  #CartDrawer * {
    color: #fff !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    text-shadow: 0 0 6px rgba(0,0,0,.25); /* subtle lift on bright gradient */
  }

  /* Headings (“YOUR CART”, section titles) – neon purple like mobile */
  #CartDrawer .drawer__heading,
  #CartDrawer h1,
  #CartDrawer h2,
  #CartDrawer .totals__subtotal {
    color: #c99bff !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }

  /* Product titles + prices stronger */
  #CartDrawer .cart-item__name,
  #CartDrawer .price,
  #CartDrawer .totals__subtotal-value {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* Secondary text (color, size, notes, tax line) slightly softer */
  #CartDrawer .cart-item__details,
  #CartDrawer .tax-note,
  #CartDrawer .cart-note__label,
  #CartDrawer .cart-note__input::placeholder {
    color: #e6e6e6 !important;
    font-weight: 500 !important;
  }

  /* Ensure no overlay sits above the text */
  #CartDrawer .gradient::after,
  #CartDrawer .drawer__inner::before {
    display: none !important;
  }
}

@media (min-width: 990px){
  #CartDrawer .drawer__inner.gradient{
    --color-foreground: 255,255,255 !important;
    --color-foreground-75: 255,255,255 !important;
    --color-foreground-70: 255,255,255 !important;
    --color-foreground-55: 245,245,245 !important;
    --color-foreground-40: 230,230,230 !important;
  }

  #CartDrawer .drawer__heading,
  #CartDrawer .totals__subtotal-value,
  #CartDrawer .price{
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(0,0,0,.3);
  }

  #CartDrawer .cart-item__details,
  #CartDrawer .cart-note__label,
  #CartDrawer .tax-note{
    color: #e6e6e6 !important;
  }
}

@media (min-width: 990px) {
  /* Cart drawer text adjustments */
  #CartDrawer {
    color: #ffffff !important;
  }

  #CartDrawer h2,
  #CartDrawer .drawer__heading {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  #CartDrawer .cart-item__name {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  #CartDrawer .cart-item__details,
  #CartDrawer .cart-item__price,
  #CartDrawer .cart-item__variant {
    color: #cccccc !important;
    font-size: 0.95rem !important;
  }

  #CartDrawer .totals,
  #CartDrawer .cart__footer {
    color: #ffffff !important;
    font-weight: 600 !important;
  }
}

/* Desktop cart drawer text refinements */
@media (min-width: 990px) {
  /* Product name + price */
  .cart-drawer .cart-item__name,
  .cart-drawer .cart-item__price {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  /* Subtext (color, size, etc.) */
  .cart-drawer .cart-item__details {
    color: #d1d1d1 !important;
    font-size: 15px !important;
  }

  /* Section headers (e.g., Estimated Total) */
  .cart-drawer .cart__footer h2,
  .cart-drawer .totals__subtotal-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
  }

  /* Value text (subtotal amount) */
  .cart-drawer .totals__subtotal-value {
    color: #ffffff !important;
    font-weight: 600 !important;
  }
}

/* Match mobile spacing + clarity */
@media (min-width: 990px) {
  .cart-drawer .cart-item__details {
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }

  .cart-drawer .totals {
    margin-top: 12px !important;
  }

  .cart-drawer .cart__footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 12px;
  }
}

@media (min-width: 990px) {
  /* Lighter subtext (Color, Size) */
  .cart-drawer .cart-item__details p,
  .cart-drawer .cart-item__details span {
    color: #cccccc !important;   /* lighter gray for readability */
    font-weight: 400;
  }

  /* Emphasize totals */
  .cart-drawer .totals__subtotal,
  .cart-drawer .totals__subtotal-value {
    color: #ffffff !important;
    font-weight: 600;
  }

  /* "ESTIMATED TOTAL" label stronger */
  .cart-drawer .totals__subtotal-label {
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff !important;
  }
}

/* Mirror mobile cart drawer styling on desktop only */
@media (min-width: 990px) {
  /* Cart drawer text */
  .cart-drawer,
  .cart-drawer * {
    color: #ffffff !important;  /* pure white text for clarity */
    font-weight: 500;
    line-height: 1.4;
  }

  /* Headings like "YOUR CART" and "ESTIMATED TOTAL" */
  .cart-drawer h2,
  .cart-drawer h3,
  .cart-drawer .totals__subtotal-label {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Product title + price */
  .cart-drawer .cart-item__name {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600;
  }
  .cart-drawer .cart-item__price {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600;
  }

  /* Color + Size text */
  .cart-drawer .cart-item__details p,
  .cart-drawer .cart-item__details span {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    font-weight: 500;
  }

  /* Order instructions text area */
  .cart-drawer .cart__note label,
  .cart-drawer .cart__note textarea {
    color: #e0e0e0 !important;
    font-size: 14px;
  }

  /* Estimated total numbers */
  .cart-drawer .totals__subtotal-value {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700;
  }

  /* Checkout button — keep bold and bright */
  .cart-drawer .cart__checkout-button {
    font-weight: 700;
    font-size: 15px;
  }
}

@media (min-width: 990px) {
  cart-drawer .totals {
    margin-top: 1.5rem !important; /* adds space above Estimated Total */
  }

  cart-drawer .cart__footer {
    padding-top: 1rem !important;  /* softens the footer area */
  }

  cart-drawer .cart__checkout-button {
    margin-top: 1rem !important;   /* separates button so it floats clean */
  }
}

@media (min-width: 990px) {
  cart-drawer .cart-item__name {
    font-weight: 600 !important; /* bold but elegant */
    font-size: 1.05rem !important; /* just a touch larger */
    letter-spacing: 0.3px; /* luxury kerning */
    color: #ffffff !important; /* pure white for clarity */
  }

  cart-drawer .cart-item__price,
  cart-drawer .cart-item__details {
    font-weight: 400 !important;
    opacity: 0.85; /* keeps hierarchy */
  }
}

@media (min-width: 990px) {
  /* Cart Drawer Background - same as mobile */
  cart-drawer .drawer__inner {
    background: #120016 !important; /* deep violet-black */
  }

  /* Heading - "YOUR CART" neon vibe */
  cart-drawer h2,
  cart-drawer h3 {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.6), 
                 0 0 12px rgba(255, 0, 255, 0.3); /* neon glow */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
  }

  /* Product name */
  cart-drawer .cart-item__name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    line-height: 1.4;
  }

  /* Product details (size, color) */
  cart-drawer .cart-item__details {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.9rem;
  }

  /* Price */
  cart-drawer .cart-item__price,
  cart-drawer .totals__subtotal-value {
    color: #ffffff !important;
    font-weight: 600;
  }

  /* Estimated total label */
  cart-drawer .totals__subtotal-label {
    color: #ff4dd2 !important; /* neon pink accent */
    font-weight: 700;
  }
}

@media (min-width: 990px) {
  .product-card__image,
  .product-card__image img {
    background: #ffffff !important; /* White background for product grid */
    padding: 20px; /* Breathing room */
    border-radius: 12px; /* Polished edges */
  }

  .product-card__title,
  .product-card__price {
    color: #000000 !important; /* Black for contrast against white */
    font-weight: 600;
  }
}

@media (min-width: 990px) {
  .product__media,
  .product__media img {
    background: linear-gradient(145deg, #0d0221, #6b0f9c, #ff0080) !important; 
    /* Dark void → Neon purple → Hot pink */
    border-radius: 12px;
    padding: 30px;
  }

  .product__title,
  .product__price {
    color: #ffffff !important;
    text-shadow: 0px 2px 8px rgba(0,0,0,0.6);
  }
}

/* Extra breathing space above footer (desktop only) */
@media (min-width: 990px) {
  .footer,
  footer {
    padding-top: 60px !important;  /* Increase spacing above footer */
  }

  .shopify-section-footer {
    margin-top: 40px !important;   /* Push footer further from content */
  }
}

/* Mobile fix — force Apex Waifu product bullets/text to display white */
@media (max-width: 749px) {
  body.template-product .product__description .rte,
  body.template-product .product__info-container .rte {
    color: #fff !important;
  }

  /* Only target Apex Waifu products */
  body.template-product[data-product-type*="Apex Waifu"] .rte ul li,
  body.template-product[data-product-type*="Apex Waifu"] .rte ol li {
    color: #fff !important;
  }

  body.template-product[data-product-type*="Apex Waifu"] .rte ul li::marker,
  body.template-product[data-product-type*="Apex Waifu"] .rte ol li::marker {
    color: currentColor !important; /* bullet = same as text */
  }

  body.template-product[data-product-type*="Apex Waifu"] .rte strong {
    color: #fff !important;
  }
}

/* Mobile-only: keep product description bullets white */
@media (max-width: 749px){
  .template-product .rte li,
  .template-product .rte li *{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* iOS Safari */
  }
  .template-product .rte li::marker{
    color: #fff !important;
  }
}

/* MOBILE-ONLY: force product description bullets to pure white on iOS/Android */
@media (max-width: 749px){
  /* nuke any inline black coming from pasted editor styles */
  .template-product .rte,
  .template-product .rte *{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* overrides inline color on iOS */
    opacity: 1 !important;                    /* some themes dim body copy */
  }
  /* bullet dots / markers */
  .template-product .rte li::marker{
    color: #fff !important;
    opacity: 1 !important;
  }
  /* links inside bullets—keep visible */
  .template-product .rte a{
    color: #fff !important;
    text-decoration: underline;
  }
}

/* ---- Mobile fix: force white bullets/text for the 4 Apex Waifu thongs ---- */
@media (max-width: 749px){

  /* Hit the 4 product pages via Shopify's body handle classes.
     If your handles differ, adjust the substrings after product-... */
  body[class*="product-lilith-rei-surreal-pin-up-waifu-thong"],
  body[class*="product-noir-femme-fatale-waifu-thong"],
  body[class*="product-kira-kagami-void-collage-waifu-thong"],
  body[class*="product-ayame-hoshi-vhs-siren-waifu-thong"] {

    /* nuke any odd blending/dimming that only shows on iOS */
    color-scheme: only light;
  }

  body[class*="product-lilith-rei-surreal-pin-up-waifu-thong"] .rte,
  body[class*="product-noir-femme-fatale-waifu-thong"] .rte,
  body[class*="product-kira-kagami-void-collage-waifu-thong"] .rte,
  body[class*="product-ayame-hoshi-vhs-siren-waifu-thong"] .rte,
  body[class*="product-lilith-rei-surreal-pin-up-waifu-thong"] .rte *,
  body[class*="product-noir-femme-fatale-waifu-thong"] .rte *,
  body[class*="product-kira-kagami-void-collage-waifu-thong"] .rte *,
  body[class*="product-ayame-hoshi-vhs-siren-waifu-thong"] .rte *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;   /* beats inline color on iOS */
    text-shadow:none !important;
    mix-blend-mode:normal !important;
    opacity:1 !important;
  }

  /* bullet dots / markers */
  body[class*="product-lilith-rei-surreal-pin-up-waifu-thong"] .rte li::marker,
  body[class*="product-noir-femme-fatale-waifu-thong"] .rte li::marker,
  body[class*="product-kira-kagami-void-collage-waifu-thong"] .rte li::marker,
  body[class*="product-ayame-hoshi-vhs-siren-waifu-thong"] .rte li::marker{
    color:#fff !important;
    opacity:1 !important;
  }

  /* keep links visible inside those bullets */
  body[class*="product-lilith-rei-surreal-pin-up-waifu-thong"] .rte a,
  body[class*="product-noir-femme-fatale-waifu-thong"] .rte a,
  body[class*="product-kira-kagami-void-collage-waifu-thong"] .rte a,
  body[class*="product-ayame-hoshi-vhs-siren-waifu-thong"] .rte a{
    color:#fff !important;
    text-decoration:underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  #km-bg-video { display:none; }
  body.template-password { 
    background:#000 url({{ 'password-fallback.jpg' | asset_url }}) center/cover no-repeat;
  }
}

.password-main input[type="password"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,255,200,.35), 0 0 30px rgba(0,255,200,.08) inset;
}

.password.gradient {
  background: transparent !important;
}

.password-main input[type="email"] {
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,0,0,.4);
  color: #fff;
  text-align: center;
}
.password-main button {
  background: red;
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

<style>
  /* Make the video cover the whole viewport */
  #km-bg-video{
    position: fixed; /* key */
    inset: 0;        /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    background:#000;
  }
  /* Dim overlay above video for readability */
  #km-bg-overlay{
    position: fixed; /* key */
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: -1;
  }

  /* Nuke the Shopify magenta gradient */
  .password.gradient,
  .password-main,
  .password-header{
    background: transparent !important;
  }

  /* Ensure the whole page is at least viewport height */
  html, body, .password-main{ min-height: 100vh; }

  /* Keep content above the video */
  .password__container, .password__form, .password__header{
    position: relative;
    z-index: 2;
    color:#fff;
  }
</style>

.password__footer-text { 
  display:block; 
  margin-top:.5rem; 
  color:#fff; 
  opacity:.8; 
  text-align:center;
}
.password__footer-login a { 
  color:#fff; 
  opacity:.7; 
  text-decoration:underline; 
}

#km-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #ff0066 0%, #ff3366 100%) !important;
}

/* PASSWORD PAGE — strip theme backgrounds everywhere */
body.template-password .gradient,
body.template-password [class^="color-"],
body.template-password .password,
body.template-password .password-main,
body.template-password .password-header,
body.template-password .password__footer,
body.template-password .shopify-section {
  background: transparent !important;
  background-image: none !important;
}

/* Keep the page black if video/poster fails */
body.template-password { background:#000 !important; }

body.template-password,
.password-main {
  background: none !important;
  background-image: none !important;
}

/* Desktop-only footer fix */
@media screen and (min-width: 769px) {
  .footer, 
  .footer a, 
  .footer small, 
  .site-footer, 
  .site-footer a, 
  .site-footer small {
    color: #ffffff !important;   /* White text for clarity */
    opacity: 0.9;                /* Slight fade to match gradient */
  }

  .footer a:hover, 
  .site-footer a:hover {
    color: #ff0040 !important;   /* Neon Kami glow on hover */
  }
}

/* Desktop-only footer text fix */
@media screen and (min-width: 769px) {
  footer, 
  footer * {
    color: #ffffff !important;   /* clean white text */
  }
}

/* Remove divider lines on footer menu pages */
.template-page .shopify-policy__container,
.template-page .rte,
.template-page main {
  border: none !important;
  box-shadow: none !important;
}

/* Kill rogue horizontal lines/borders in Shopify policy pages */
.shopify-policy__container hr,
.shopify-policy__container p:empty,
.shopify-policy__container p:after,
.shopify-policy__container p:before,
.shopify-policy__container h2,
.shopify-policy__container h3,
.shopify-policy__container .rte hr {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.shopify-policy__container .rte p + p::before,
.shopify-policy__container .rte p + p::after {
  content: none !important;
  display: none !important;
}

/* Just in case any theme adds a 1px top separator inside sections */
.shopify-policy__container .section,
.shopify-policy__container .content-for-layout,
.shopify-policy__container .rte {
  border-top: 0 !important;
}

/* Remove rogue lines from empty paragraphs in policy pages */
.shopify-policy__body p:empty {
  display: none !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;


/* Policy pages: kill the thin divider lines */
.shopify-policy__body p { 
  border: none !important;
}

/* Also hide “blank” lines the editor sometimes inserts */
.shopify-policy__body p:empty { 
  display: none !important; 
  margin: 0 !important; 
  padding: 0 !important;
}

/* Hide paragraphs that only contain a <br> or &nbsp; wrapper */
.shopify-policy__body p:has(> br:only-child),
.shopify-policy__body p:has(> span:only-child:empty) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* If an <hr> sneaks in, remove it too */
.shopify-policy__body hr { 
  display: none !important; 
}}

/* KAMI — remove divider line on policy pages only */
.shopify-policy__container hr,
.shopify-policy__body hr { 
  display:none !important; 
  height:0 !important; 
  border:0 !important; 
}

/* Some themes draw the line with pseudo-elements on headings/titles */
.shopify-policy__title::after,
.shopify-policy__container h1::after,
.shopify-policy__container h2::after,
.shopify-policy__container h3::after {
  content:none !important;
}

/* And some use a border on headings */
.shopify-policy__container h1,
.shopify-policy__container h2,
.shopify-policy__container h3 {
  border:none !important;
  box-shadow:none !important;
}

/* Belt-and-suspenders: kill any before/after “divider” in the policy body only */
.shopify-policy__container *::before,
.shopify-policy__container *::after {
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}