/** Shopify CDN: Minification failed

Line 1372:37 Expected identifier but found "!"
Line 1372:40 Expected identifier but found "!"
Line 1373:27 Expected identifier but found "!"
Line 1373:30 Expected identifier but found "!"
Line 1375:32 Expected identifier but found "!"
Line 1375:40 Expected identifier but found "!"
Line 1375:49 Expected identifier but found "!"
Line 1375:52 Expected identifier but found "!"
Line 1376:31 Expected identifier but found "!"
Line 1376:35 Expected identifier but found "!"
... and 15 more hidden warnings

**/
/* Color custom properties */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* base */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .spaced-section {
    margin-top: calc(4rem /*+ var(--page-width-margin)*/); /*Top Space*/
  }

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

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

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

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

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}
.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
  padding: 4rem 0 5rem;
}

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

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

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

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

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

.hidden {
  display: none !important;
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

.text-body {
  font-size: 1.5rem;
  letter-spacing: 2.6px;
  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);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  /* KHS: umschaltbar über Editor (Master + Bereich "Überschriften") */
  font-family: var(--khs-headings-family);
  font-style: normal;
  font-weight: var(--khs-headings-weight);
  font-variation-settings: var(--khs-headings-vsettings);
  letter-spacing: var(--khs-headings-tracking);
  text-transform: var(--khs-headings-transform);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  -webkit-font-smoothing: antialiased;
}

.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);
    text-align: center; 
}

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

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

@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) * 1rem);
     text-align: center; 
}

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

h4,
.h4 {
  font-family: var(--khs-headings-family);
  font-style: normal;
  font-size: calc(var(--font-heading-scale) * 1.5rem);
     text-align: center; 
}

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

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

/* ============ KHS Mixed-Weight Produkttitel ============
   Der Titel-Container ist Archivo Black Expanded. Diese Spans
   variieren nur das Gewicht: thin = leicht, bold = schwer.
   Beide behalten die Expanded-Breite (wdth 125). */
.khs-title-thin {
  font-variation-settings: "wght" 300, "wdth" 125 !important;
  font-weight: 300 !important;
}
.khs-title-bold {
  font-variation-settings: "wght" 900, "wdth" 125 !important;
  font-weight: 900 !important;
}
/* Wenn Überschriften auf Montserrat zurückgeschaltet sind, hat Mixed-Weight
   keine Breiten-Achse — dann nur Gewicht variieren, keine Expanded-Optik. */
.khs-headings-off .khs-title-thin { font-variation-settings: normal !important; font-weight: 400 !important; }
.khs-headings-off .khs-title-bold { font-variation-settings: normal !important; font-weight: 800 !important; }
/* WICHTIG: .product__title ist display:inline-flex und bricht daher
   NICHT um, sobald Wort-Spans drin sind. Sobald Mixed-Weight aktiv ist,
   schalten wir den Titel auf display:block + zentriert — dann greift
   normaler Textumbruch, Leerzeichen inklusive. Die Spans sind inline.
   Marker-Klasse .product__title--mixed als robuster Fallback zu :has(). */
.product__title--mixed,
.product__title:has(.khs-title-bold),
.product__title:has(.khs-title-thin) {
  display: block !important;
  text-align: center !important;
}
.khs-title-thin,
.khs-title-bold {
  display: inline;
}
/* ============ END Mixed-Weight ============ */

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.1rem;
  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: .75rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
  display: none;
}

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

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

.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: normal /*0.04rem*/;
  font-weight: 600;
}

.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: 1rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.hidden {
  display: none !important;
}

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

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

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

.center {
  text-align: center;
}

.right {
  text-align: center;
}

.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; 
  font-weight: 300;
}

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

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

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

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

.link[role="link"]:not([href]) {
  cursor: not-allowed;
}

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

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

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

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

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

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

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

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

.visibility-hidden {
  visibility: hidden;
}

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

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

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

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

.icon-arrow {
  width: 1.5rem;
  display:inline-flex
  height: 8px;
}

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

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

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

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

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

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

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

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

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

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

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

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

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

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

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

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

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

/*
  Focus ring - inset
*/

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

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

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

/*
  Focus ring - none
*/

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

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

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

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

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

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

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

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

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  /* margin: 3rem; */
  margin-left: 0;
  margin-right: 0;/*Lücken zwischen collection list verändern*/
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.1rem;
  background: radial-gradient(circle, rgb(220, 220, 220) 0%, rgb(222, 222, 222) 20%, rgb(230, 230, 230) 80%, rgb(237, 237, 237));
  color: white;
  border-radius: 100px;
  padding: 3px 6px;
  font-size: 12px;
  margin: 3px 12rem;
  font-style: oblique;
  font-weight: 600;
  margin-top: -14px !IMPORTANT;
}

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

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

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  margin-left: -0.5rem;
  padding: 0;
  list-style: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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%;
  border-radius: 0mm;
}

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

.media--square {
  padding-bottom: 100%;
  border-radius: 5mm !important;
}

.media--portrait {
  padding-bottom: 125%;
  border-radius: 1mm !important;
}

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

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

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

deferred-media {
  display: block;
}

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

.button,
.shopify-challenge__button,
.customer button {
  cursor: pointer;
  display: inline-block;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 14px /*16px*/ 24px;
  font-size: 16px;
  line-height: 1.5;
  display: inline-block;
  font-family: var(--khs-buttons-family);
  font-variation-settings: var(--khs-buttons-vsettings);
  font-weight: var(--khs-buttons-weight);
  font-style: normal;
  text-transform: var(--khs-buttons-transform);
  letter-spacing: 0.02em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
  text-transform: uppercase;
  background-color:  #8ACE00!important;
  border-color: #f1f1f1;
  color: #f1f1f1 !important;
  box-shadow: white !important;
  }
  .btn:focus {
    outline: 0; }
  .btn:not(.disabled):not([disabled]):hover, .btn:not(.disabled):not([disabled]):focus {
    opacity: 1;
    color: #ffffff;
    background-color: #d5e0e2;
    border-color: #ffffff;
    -webkit-box-shadow: 0 0 0 0.2rem #afc4c9;
    -moz-box-shadow: 0 0 0 0.2rem #afc4c9;
    -ms-box-shadow: 0 0 0 0.2rem #afc4c9;
    -o-box-shadow: 0 0 0 0.2rem #afc4c9;
    box-shadow: 0 0 0 0.2rem #afc4c9; }
  .btn:not(.disabled):not([disabled]):active {
    color: #f1f1f1;
    background-color: #c6d5d8;
    border-color: #ffffff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none; }

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

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

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

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

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

.button--primary { /*Homepage buttons*/
  background-color: white !important;!i;!;
  border: black !important;!i;!;
  color: #27292b !important;
  border-color: grey !important;!Import;!Importn;!I;!;
  border-width: 1px !important;!im;!imo;!i;!;
  border-style: solid !important;!i;!;!import;!importn;!i;!;
}


.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: 9rem;
  min-height: 3.5rem;
}

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

/* Button - hover */

.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover {
  box-shadow: 0 0 0 0.4rem #f1f1f1;
  /*background-color: #f1f1f1 !important;*/
  background: linear-gradient(70deg, #f1f1f1, rgba(245, 245, 245), rgb(240, 240, 240));
  color: #27292b !important;
  border-color: #f1f1f1 /*#27292b*/;
  border-width: 2px;
  
  /*box-shadow: 0 0 0 0.4rem #27292b /*rgba(var(--color-button), var(--alpha-button-border));*/
}

/* Button - other */

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

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

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

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

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

/* Button - social share */

.share-button {
  display: inline-flex;
  position: relative;
}

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

.share-button__button {
  font-size: 1.4rem;
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  JUSTIFY-CONTENT: CENTER;
  color: white;
  margin-left: 0;
  padding-right: 9;
  padding-left: 9;
  padding-top: 0;
  border: 0.1rem black;
  border-radius: 16px;
  background-color: (180, 180, 190);
}

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

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

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  border: 0.2rem black;
  color: rgb(100, 100, 110);
  border-color: rgb(150, 150, 150);
  border-radius: 12px;
  font-weight: 500;
  background-color: white !important;
  /* border-style: solid; */
  box-shadow: 0px 0px 9px rgb(200, 200, 200);
  margin-bottom: 20px;
  margin-top: 5px;
}

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

.share-button__fallback {
  background: white;
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
}

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

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

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

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

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

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

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

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

/* component-form , "Varianten Auswahl"*/
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(250, 250, 250);
  border: none /*0rem solid transparent*/;
  border-radius: 16px;
  color: rgb(0, 0, 0);
  font-size: 12px;
  width: 100%; /*170px*/
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), );
  height: 48px;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
}

.select__select {
  font-family: var(--font-body-family); 
  font-style: var(--font-body-style);
  font-weight: 400 /*var(--font-body-weight)*/;
  font-size: 1.4rem;
  border-radius: 16px !important;
  color: rgba(var(--color-foreground), 0.75);
}

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

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

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

/* Select */

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

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding-top: 13px;
  padding-bottom: 13px;
  padding-right: 35px/*28px*/;
  padding-left: 15px;
  width: 165px;
  background: radial-gradient(circle, rgb(247, 247, 247) 0%, rgb(250, 250, 250) 20%, rgb(245, 245, 245) 80%, rgb(247, 247, 247))
}

/* Field */

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

.customer .field {
  display: block;
}

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

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

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: 1.5rem;
  top: 12px;
  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.2rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: 0.3em;
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 0.8rem 1.5rem 0.8rem;
}

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

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

.field__button {
  align-items: center;
  border-radius: 50px;
  border: 0;
  color: white;
  background: #6e7edb;
  cursor: pointer;
  display: flex;
  height: 4.5rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 1px !important;
  width: 4.4rem;
}

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

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

/* Text area */

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

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

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

/* Form global */

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

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

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

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

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

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

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

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

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

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

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

/* component-quantity */
.quantity {
  border: 0.1rem solid rgba(var(--color-base-text), 0.08);
  position: relative;
  height: 4.5rem;
  width: calc(14rem / var(--font-body-scale));
  display: flex;
  border-radius: 16px;
  background-color: rgb(250,250,250);
  background: radial-gradient(circle, rgb(251, 251, 251) 0%, rgb(253, 253, 253) 20%, rgb(247, 247, 247) 80%, rgb(250, 250, 250));
}

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

.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;
    border-radius: 12px;
}

.quantity__button svg {
  width: 1rem;
  pointer-events: none;
  border-radius: 12px;
}

.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;
    border-radius: 12px;

    
}

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

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

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

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

.modal__toggle-close {
  display: none;
}

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

.modal__toggle-open {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__icon span {
  height: 100%;
}

.header__icon::after {
  content: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  height: 100%;
}

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

.search-modal__form {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header__menu {
  padding: 0 1rem;
}

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

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

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

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

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

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

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

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

.header__submenu .header__submenu {
  background-color: 200,200,200, 0.03);
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

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

.header__submenu .header__menu-item {
  padding: 0.95rem 3.5rem 0.95rem 2rem;
}

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

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

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

details-disclosure > details {
  position: relative;
}

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

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

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

/* KHS: robust POSITION-FIX scroll-lock (Solution A) — plain
   overflow:hidden is ignored by iOS Safari and, once the page is
   scrolled, makes the fixed drawer inside the sticky-header island
   mis-position so everything looks shifted and untappable. Instead we
   freeze the body with position:fixed at the remembered scroll offset
   (set inline from JS via top:-Ypx). This pins the page perfectly and
   the drawer overlays the true viewport. JS restores scroll on close. */
/* KHS drawer scroll lock — NON-DISPLACING.
   The old approach set body{position:fixed; top:-Ypx} which fought the
   sticky header: making the body the containing block dragged the fixed
   header + drawer up by Y pixels, so opening the menu after scrolling
   jumped the whole page. The drawer is already position:fixed and covers
   the viewport, so we don't need to move the body at all — we just stop
   the background from scrolling. overflow:hidden here + a touchmove guard
   in JS (which still lets the drawer itself scroll) does it, iOS-safe,
   with zero repositioning of the header or content. */
/* KHS drawer scroll lock — NON-DISPLACING and STICKY-SAFE.
   History of this bug, so it doesn't get reintroduced:
   1) body{position:fixed; top:-Ypx} locked scroll but made <body> the
      containing block, dragging the sticky header + drawer up by Y — the
      menu opened mis-anchored in mid-page after scrolling.
   2) body{overflow:hidden} (or touch-action:none) also broke it: an
      ancestor with overflow:hidden CANCELS position:sticky, so the header
      dropped from top:0 to its natural (off-screen) position and the drawer
      followed it up — same mis-anchored result.
   The ONLY thing that locks the background without touching layout is the
   JS touchmove guard (KHSScrollLock) which preventDefaults background touch
   scroll while still letting the drawer scroll. So this class must NOT set
   position, overflow, or touch-action on <body>. It exists only as a hook
   for the drawer-scrollability rule below. Keep it that way. */
body.khs-drawer-locked{
  /* intentionally empty: no position / overflow / touch-action here.
     background scroll is blocked by the JS touchmove guard instead, which
     keeps the sticky header and the drawer correctly anchored. */
}
/* the drawer stays scrollable if its content is tall */
body.khs-drawer-locked .menu-drawer{
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

@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: 2rem;
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  line-height: 1;
  padding: 0.6rem 1.3rem;
  text-align: center;
  background-color: 200,200,200;
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-foreground));
  word-break: break-word;
}

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

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

  .icon-close-small path {
    stroke: CanvasText;
  }
[class*='collection'] .card-information__wrapper{
    text-align: left !important;
}

[class*='collection'] [class*='card-information'] .price{
    align-items: left !important;
    justify-content: left !important;
}
.collection-hero__title {
    margin: 3rem 0 0;
    text-align: center;
}

  .card-information__wrapper{
text-align: center;
}
.card-information__wrapper>.price{
display: block;
}
}
  .price__sale .price-item--regular{
    color: rgb(160, 160, 160) !important;
}

.cart-item__price-wrapper *,
.price__sale .price-item--sale{
    color: #a4a4a4 !important;
}
  .site-footer .small--one-whole{
     margin: 0 auto;
    float: none;
}
.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
  display: block;
}
        /*Hover menu*/ 
      
.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
  display: block;
}
.site-nav__dropdown ( top: 30px; )
  
  /* section-announcement-bar */
#shopify-section-announcement-bar {
  z-index: 4;
}

.announcement-bar {
  border-bottom: 0rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: black;
}
    

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

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

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

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

.announcement-bar__message {
  text-align: center;
  padding: 1.2rem 2rem;
  margin: 0;
  font-weight: 500;
  font-size: 1.1rem !important;
  letter-spacing: 0.25rem;
}

.sales-points{
  list-style:none;
  padding:0;
  margin:25px 0
}

.quick-add-modal .sales-points{
    display:none
}

.sales-point{
  display:block;
  margin-bottom:10px
}

.sales-point:last-child{
    margin-bottom:0;
  }

.sales-point .icon{
    position:relative;
    width:25px;
    height:25px;
    margin-right:10px
  }

[dir=rtl] .sales-point .icon{
      margin-right:0;
      margin-left:10px
  }

@media only screen and (max-width:768px){
  .sales-point .icon-and-text{
    justify-content:center;
  }
}

@keyframes inventory-pulse{
  0%{
    opacity:0.5;
  }
  to{
    transform:scale(2.5);
    opacity:0;
  }
}

.icon--inventory:after,.icon--inventory:before{
    width:9px;
    height:9px;
    background:#54c63a;
    border-radius:9px;
    position:absolute;
    left:0;
    top:0;
    content:"";
    margin:8px;
  }

.icon--inventory:before{
    animation:inventory-pulse 2s linear infinite;
  }

.inventory--low .icon--inventory:after,.inventory--low .icon--inventory:before{
      background:#f4af29;
    }

.inventory--low{
  color:#f4af29;
}

.color-swatch{
  position:relative;
  display:block;
  text-indent:-9999px;
  overflow:hidden;
  margin:0 4px 4px;
  background-position:50%;
  background-size:cover;
  background-repeat:no-repeat;
  height:40px;
  width:40px;
  box-shadow:0 0 0 1px #e8e8e1;
  box-shadow:0 0 0 1px var(--colorBorder);
  transition:box-shadow 0.2s ease
}

[data-swatch_style=round] .color-swatch{
    border-radius:100%
}

.color-swatch:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
  }

.color-swatch:before{
    border:3px solid;
    border-color:#ffffff;
    border-color:var(--colorBody)
  }

[data-swatch_style=round] .color-swatch:before{
      border-radius:100%;
      border-width:4px;
      top:-1px;
      left:-1px;
      right:-1px;
      bottom:-1px
  }

.tag:not(.tag--active) label:hover .color-swatch:hover,a.color-swatch:hover{
  box-shadow:0 0 0 1px #000000;
  box-shadow:0 0 0 1px var(--colorTextBody);
}

.tag--active .color-swatch{
  box-shadow:0 0 0 2px #000000;
  box-shadow:0 0 0 2px var(--colorTextBody);
}

.color-swatch--small{
  width:15px;
  height:15px
}

@media only screen and (min-width:769px){

.color-swatch--small{
    width:19px;
    height:19px
}
  }

.color-swatch--small:before{
    border:2px solid;
    border-color:#ffffff;
    border-color:var(--colorBody)
  }

[data-swatch_style=round] .color-swatch--small:before{
      border-width:3px
  }

.tag--swatch{
  display:inline-block
}

.tag--swatch>label{
    margin-bottom:0;
  }

.color-swatch--filter{
  width:35px;
  height:35px;
}

.tag--active .color-swatch--filter:hover:after{
  position:absolute;
  content:"";
  left:50%;
  top:0;
  bottom:0;
  border-left:1px solid;
  border-color:#e8e8e1;
  border-color:var(--colorBorder);
  transform:rotate(45deg);
}

  
  /* Desktop vs Mobile banner distinction*/
  
  @media only screen and (max-width: 749px) {
   .yx-mobile-hidden{
      display:none;
    }
   .yx-desktop-hidden{
      display:block;
    }
}

@media only screen and (min-width: 750px) {
   .yx-mobile-hidden{
      display:block;
   }
   .yx-desktop-hidden{
      display:none;
    }
}
  
  button.chat-toggle svg {
    width: auto;
    height: 20px;
    margin: auto;
}

  @media only screen and (min-width: 300px) and (max-width: 1040px)
#noreviews {
    width: 100vw;
    display: table-cell;
    text-align: center;
    border-radius: 14px;
}

  /*Bilder Galerie*/
  
.pwzrjss10 {
    /*right: 5px;
    height: 45px !important;
    position: absolute;
    top: 50%;
    right: -12!important;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    z-index: 1;
    padding-left: 0;
    border-radius: 50%;
    padding: 9px !important;
    fill: rgb(180 180 180) !important;
    background-color: transparent/*rgb(120, 120, 120, 10%)*/ !important;*/
    right: 5px;
    height: 45px !important;
    position: absolute;
    top: 50%;
    right: -12!important;
    transform: translateY(-50%);
    cursor: pointer;
    /* display: NONE !IMPORTANT; */
    align-items: center;
    justify-content: center;
    width: 45px !important;
    z-index: 1;
    padding-left: 0;
    border-radius: 50%;
    padding: 13px !important;
    fill: gray !important;
    /* box-shadow: 0rem 0rem 1rem rgb(180 180 180); */
    /* background-color: white !important;*/
    /* background: linear-gradient(260deg, rgb(255,255,255) 1%, rgb(255,255,255, 70%) 99%) !important; */
    background: none !IMPORTANT;
    border-radius: 2% !IMPORTANT;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
}

.pwzrjss11 {
    position: absolute;
    top: 50%;
    left: -12 !important;
    transform: translateY(-50%);
    cursor: pointer;
    /* display: none !important; */
    align-items: center;
    justify-content: center;
    width: 45 !important;
    height: 45 !important;
    z-index: 1;
    padding-right: 0;
    padding: 13px !important;
    fill: gray !important;
    /* box-shadow: 0rem 0rem 1rem rgb(180 180 180); */
    /*  background-color: white !important;*/
    /* background: linear-gradient(90deg, rgb(255,255,255) 1%, rgb(255,255,255, 70%) 99%) !important; */
    background: none !important;
    border-radius: 2% !IMPORTANT;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}
  
.pwzrjss117 {
    left: 5px;
} /*IPad Slider Buttons 116+117*/

.pwzrjss5 {
    width: 100%;
    height: auto;
    position: absolute;
    max-width: none;
    border-radius: 4px;
  
}
  

  
 
  .shopify-policy__container {
    max-width: 560px;
    max-width: 65ch;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
  
#reviews, #noreviews {
    background-color: #FFFFFF;
    border-top: solid;
    border-top-color: rgb(200, 200, 200);
    border-top-width: 0.2px;
    padding-top: 10px;
}
  

   /* Gallery pagination dashes (Productwiz/Swiper).
      Rebuilt: the active dash used to be 50px vs 20px inactive and a
      different height, so the whole row shifted and jittered on swipe.
      Now every dash is the same box; only weight and colour change. */
   .pwzrswiper-pagination-bullet {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 4.5px !important;
    background: rgba(14, 14, 15, 0.28) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transform: none !important;
    transition: background 180ms linear, transform 180ms linear !important;
    vertical-align: middle;
}

    .pwzrswiper-pagination-bullet-active {
    background: #0e0e0f !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 4.5px !important;
    border-radius: 50% !important;
    /* enlarge in place (uniform scale keeps it a circle, row height stays put) */
    transform: scale(1.45) !important;
}

.pwzrswiper-container-horizontal > .pwzrswiper-pagination-bullets {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  bottom: 6px;
}

/* many images: cap the row so it stops spanning the full screen */
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet {
  transform: none !important;
}
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active,
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active-main {
  transform: scale(1.45) !important;
}
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active-prev,
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active-next {
  transform: scale(0.7) !important;
}
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active-prev-prev,
.pwzrswiper-pagination-bullets-dynamic .pwzrswiper-pagination-bullet-active-next-next {
  transform: scale(0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pwzrswiper-pagination-bullet { transition: none !important; }
}
  
/* (old bullet styles removed — superseded by the block above) */

button#dummy-chat-button.chat-toggle {
    border-radius: 30px;
    border: 1.5px solid transparent;
    cursor: pointer;
    display: flex;
    margin-top: 4px;
    height: 60px;
    width: 60px;
    padding: 0;
    box-shadow: rgb(0 0 0 / 30%) 0px 2px 8px !important;
}
  
.interstitial-view__welcome {
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    height: 294px;
    min-height: 294px;
    mask-image: radial-gradient(circle,#fff 100%,#000 0);
    -webkit-mask-image: -webkit-radial-gradient(circle,#fff 100%,#000 0);
    background: linear-gradient(70deg, rgb(69, 69, 77), rgba(69, 69, 77, 0.8)) rgb(240, 240, 240);
}

.pwwp__bg, .pwwp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(180, 180, 180, 66%) !important;
}
  
.pwwp__caption, .pwwp__top-bar {
    background-color: rgb(180, 180, 180, 66%) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.pwwp__button, .pwwp__button--arrow--left:before, .pwwp__button--arrow--right:before {
    background: url(https://pwzcdn.com/rio-store/prod/latest/default-skin.png) 0 0 no-repeat;
    background-size: 264px 88px;
    width: 0px !important;
    height: 0 !important;
}
  
  .pwwp__button--close {
  width: 44px !important;
    height: 44px !important;
  
  }
  
.cc-floating .cc-message {
    display: block;
    margin-bottom: 1em;
    font-family: Popppins, sans-serif !important;
}
  
.cc-color-override--871503377 .cc-btn {
    color: rgb(0, 0, 0);
    border-color: transparent;
    background-color: rgb(225, 225, 251);
    outline: none;
    border-radius: 5px;
    font-family: poppins, sans-serif !important; 
}
  
.cc-color-override--512566499.cc-window {
    color: rgb(62, 62, 62);
    background-color: rgb(249, 249, 249);
    opacity: 1;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
  
.pwwp__button {
    width: 44px;
    height: 44px;
    position: relative;
    background: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: .75;
    -webkit-transition: opacity .2s;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) /*opacity .2s*/;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 100px;
    background-color: #3b3b3b !important;
    color: black;
}
  
  
@media (max-width: 750px).rio-media-gallery {
    padding-top: 15px;
    padding-bottom: 5px;
    width: 375 !important;
}
  
.marquee-container {
overflow: hidden;
}
.marquee {
margin: 0;
display: inline-block;
}
.marquee-words {
white-space: nowrap;
animation: marquee-keywords 15s linear infinite;
font-size: 20px;
letter-spacing: 0.2em;
}
@keyframes marquee-keywords {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
  

  
.cc-btn+.cc-btn {
margin-left: .5em;
border-radius: 50px !important;
}
  

/* =========================================================
   KURZHARTSCHNELL — FIXES + KINETIK LAYER
   Built on the untouched original theme. Contains ONLY:
   real fixes (product grid, variant dropdowns, footer email,
   checkout button) + kinetik (scroll-reveal, tilt, progress).
   No font/colour/concept changes — original look preserved.
   Delete this block (+ the kinetic.js include in theme.liquid)
   to fully revert.
   ========================================================= */

:root {
  /* minimal vars used by the blocks below (no look-changing tokens) */
  --ff-ink: #111111;
  --ff-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ff-fast: 180ms;
  --ff-med: 420ms;
  --ff-slow: 700ms;
}

/* ---- FIX: CHECKOUT button (cart) — black frame, light fill, black text
   + matched width: same max-width/centering as the dynamic checkout
   buttons below, so all CTAs line up flush. */
.cart__ctas .cart__checkout-button,
.cart__checkout-button,
button#checkout {
  position: relative !important;
  overflow: hidden !important;
  background: var(--ff-ink) !important;
  color: #fff !important;
  border: 1.5px solid var(--ff-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 36rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: transform var(--ff-fast) var(--ff-ease) !important;
}
/* shimmer sweep — subtle moving highlight to mark it as THE checkout button */
.cart__checkout-button::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent) !important;
  transform: skewX(-20deg) !important;
  animation: khs-checkout-shimmer 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
}
.cart__checkout-button::after { display: none !important; content: none !important; }
@keyframes khs-checkout-shimmer {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.cart__checkout-button:hover,
button#checkout:hover {
  background: var(--ff-ink) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
@media (prefers-reduced-motion: reduce) {
  .cart__checkout-button::before { animation: none !important; }
}

/* ---- FIX: COLLECTION GRID — even spacing, no clipped titles, footer gap
   Keeps the theme's native square+cover media; only fixes layout. */
ul.product-grid {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media screen and (min-width: 750px) {
  ul.product-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media screen and (min-width: 990px) {
  ul.product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
ul.product-grid > li.grid__item {
  padding: 0 !important; margin: 0 !important;
  max-width: none !important; width: auto !important;
}
ul.product-grid > li .card-wrapper {
  /* was padding-bottom:0.6rem — moved to margin so the shadow box hugs the
     visible card (padding would extend the shadow-casting box below the
     caption and show a faint lip). Margin keeps the exact same spacing. */
  padding: 0;
  margin: 0 0 0.6rem;
  height: 100%;
  transition: transform 0.18s cubic-bezier(0.32, 0, 0.24, 1),
              box-shadow 0.18s cubic-bezier(0.32, 0, 0.24, 1);
  -webkit-tap-highlight-color: transparent;
  /* kinetik tilt (JS sets vars; neutral by default) */
  transform: translate(var(--ff-tx,0), var(--ff-ty,0))
             perspective(700px) rotateX(var(--ff-rx,0)) rotateY(var(--ff-ry,0));
  will-change: transform;
}
/* KHS card shadow — "crisp": close + defined, low spread, neutral grey.
   Sits on .card-wrapper (the full card = media + black caption as one unit)
   with the card's own corner radius so it hugs the rounded shape. Because
   the wrapper is what scales on press, the shadow shrinks with the card. */
ul.product-grid > li .card-wrapper {
  border-radius: var(--khs-card-radius, 0px) var(--khs-card-radius, 0px) var(--khs-card-bottom-radius, 6px) var(--khs-card-bottom-radius, 6px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
}
/* on press the card shrinks — pull the shadow in tight so it reads as
   "pressed down onto the page" rather than floating. */
ul.product-grid > li .card-wrapper:active,
ul.product-grid > li .card-wrapper.khs-pressed {
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
}
/* ---- KHS press-down (variant A): tap shrinks the card, the image
   darkens, and the title nudges up toward it. 0.18s, snappy. This
   replaces the old "pop bigger" hover so the card presses IN. ---- */
ul.product-grid > li .card-wrapper .media,
ul.product-grid > li .card-wrapper .card-information,
ul.product-grid > li .card-wrapper .card__information,
ul.product-grid > li .card-wrapper .card__text {
  transition: filter 0.18s cubic-bezier(0.32, 0, 0.24, 1),
              transform 0.2s cubic-bezier(0.32, 0, 0.24, 1);
}
ul.product-grid > li .card-wrapper:active,
ul.product-grid > li .card-wrapper.khs-pressed {
  transform: scale(0.9) !important;
  transition: transform 0.18s cubic-bezier(0.32, 0, 0.24, 1) !important;
}
ul.product-grid > li .card-wrapper:active .media,
ul.product-grid > li .card-wrapper.khs-pressed .media {
  filter: brightness(0.82);
}
/* NOTE: we deliberately do NOT transform .card-information__wrapper or any
   ancestor of the product link. A transform there becomes the containing
   block for the link's stretched ::after click-overlay, shrinking it to
   just the text and making the image un-clickable. The shrink on the
   whole .card-wrapper is safe because that element IS the full card, so
   the overlay still covers everything. */
/* neutralise the theme's default "scale up label" hover so it can't
   fight the press-down */
.card-wrapper:hover .card__text { transform: none; }

@media (prefers-reduced-motion: reduce) {
  ul.product-grid > li .card-wrapper:active,
  ul.product-grid > li .card-wrapper.khs-pressed {
    transform: none !important;
  }
  ul.product-grid > li .card-wrapper:active .media,
  ul.product-grid > li .card-wrapper.khs-pressed .media { filter: none; }
  ul.product-grid > li .card-wrapper:active .card-information,
  ul.product-grid > li .card-wrapper.khs-pressed .card-information,
  ul.product-grid > li .card-wrapper:active .card__text,
  ul.product-grid > li .card-wrapper.khs-pressed .card__text { transform: none; }
}
/* breathing room so the grid never slams into the next section/footer */
#ProductGridContainer { padding-bottom: 5rem !important; }
.collection.page-width { padding-bottom: 2rem !important; }
/* product recommendations ("GET MORE") shouldn't slam into the footer */
.product-recommendations,
.shopify-section--product-recommendations,
#shopify-section-product-recommendations { padding-bottom: 5rem !important; }
/* title: wrap freely, never clipped (fixes the SAPPHO cut-off) */
ul.product-grid .card-information__wrapper,
ul.product-grid .card-information__text,
ul.product-grid .card-information__text a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* consistent breathing room above the text block (RING/SAPPHOS/price)
   so it's not cramped against the image on ring cards */
ul.product-grid .card-information {
  margin-top: 1.2rem !important;
  padding-top: 0 !important;
}
/* image hover scale on pointer devices */
@media (hover: hover) {
  ul.product-grid .card-wrapper:hover .media > img:first-child { transform: scale(1.04); }
}
ul.product-grid .media > img { transition: transform var(--ff-med) var(--ff-ease); }
/* keep SOLD OUT badge on one line */
ul.product-grid .card__badge .badge { white-space: nowrap !important; }

/* ---- FIX: variant dropdown layout is handled in
   section-main-product.css (loads after base, authoritative).
   These just guarantee the buy button stays full width. */
.product-form__buttons { padding: 0 !important; margin: 0 !important; }
.product-form__buttons .product-form__submit { width: 100% !important; }

/* ---- FIX: Footer newsletter — inline field + visible E-MAIL label --- */
.footer .newsletter-form { max-width: 42rem; margin-inline: auto; }
.newsletter-form__field-wrapper .field {
  display: flex !important; align-items: center !important;
  border: 1px solid rgba(17,17,17,0.18) !important;
  border-radius: var(--khs-nl-radius, 60px) !important;
  /* inner gutter so the round button never touches the border */
  padding: 0.4rem 0.4rem 0.4rem 0 !important;
  overflow: visible !important;
  background: #fff !important; margin: 0 !important; box-shadow: none !important;
}
.newsletter-form__field-wrapper .field::after,
.newsletter-form__field-wrapper .field::before { display: none !important; }
.newsletter-form__field-wrapper .field__input {
  flex: 1 1 auto; height: 4.4rem !important; min-height: 4.4rem !important;
  padding: 0 1.2rem 0 2rem !important; font-size: 1.3rem !important;
  border: none !important; background: transparent !important;
  border-radius: var(--khs-nl-radius, 60px) !important;
  box-shadow: none !important; color: var(--ff-ink) !important;
}
.newsletter-form__field-wrapper .field__input:focus,
.newsletter-form__field-wrapper .field__input:focus-visible {
  outline: none !important; box-shadow: none !important;
}
/* focus ring sits on the pill itself so it stays round */
.newsletter-form__field-wrapper .field:focus-within {
  border-color: var(--ff-ink, #111) !important;
}
.newsletter-form__field-wrapper .field__input::placeholder { color: #9a9a9a !important; opacity: 1; }
.newsletter-form__field-wrapper .field__label { display: none !important; }
.newsletter-form__button, .newsletter-form__button.field__button {
  position: static !important; flex: 0 0 auto;
  width: 4.4rem !important; height: 4.4rem !important; min-height: 4.4rem !important;
  border-radius: 50% !important; background: var(--ff-ink) !important; color: #fff !important;
  margin: 0 !important; border: none !important;
  display: flex !important; align-items: center; justify-content: center;
  transition: background var(--ff-fast) var(--ff-ease), color var(--ff-fast) var(--ff-ease);
}
.newsletter-form__button:hover { background: #fff !important; color: var(--ff-ink) !important; box-shadow: inset 0 0 0 1px var(--ff-ink) !important; }
.newsletter-form__button .icon { width: 1.5rem !important; height: 1.5rem !important; color: currentColor; }

/* ---- KINETIK: scroll reveal -----------------------------------------
   Only elements the JS marks with data-ff-hide (i.e. below the fold)
   start hidden. Above-the-fold content is never hidden, so the product
   page no longer jumps/pops on load. JS-off => nothing hidden. */
.ff-kinetic [data-ff-reveal][data-ff-hide] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--ff-slow) var(--ff-ease), transform var(--ff-slow) var(--ff-ease);
  transition-delay: var(--ff-reveal-delay, 0ms); will-change: opacity, transform;
}
.ff-kinetic [data-ff-reveal][data-ff-hide][data-ff-shown] { opacity: 1; transform: none; }

/* ---- KINETIK: scroll progress line --------------------------------- */
#ff-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--ff-ink); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9999; pointer-events: none; will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ff-kinetic [data-ff-reveal] { opacity: 1 !important; transform: none !important; }
  ul.product-grid > li .card-wrapper { transform: none !important; }
  #ff-progress { display: none; }
}

/* ---- KINETIK: quick page fade ---------------------------------------
   Fade-IN is pure CSS (animation) so the page is NEVER stuck blank even
   if JS fails. JS only adds .ff-fade-out for the exit on navigation. */
@keyframes ffFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.ff-fade-ready body {
  animation: ffFadeIn 220ms var(--ff-ease) both;
}
html.ff-fade-ready.ff-fade-out body {
  animation: none;
  opacity: 0;
  transition: opacity 180ms var(--ff-ease);
}

/* ---- MARQUEE announcement bar -------------------------------------
   JS fills the viewport with enough copies to exceed screen width, then
   duplicates the whole track once. translateX(-50%) then loops with no
   gaps no matter how short the text. Failsafe: before JS runs (or if it
   never does) the text simply shows static, centered. */
/* never let anything (incl. the wide marquee track) scroll the page
   sideways. 'clip' (not 'hidden') so it can't break position:sticky. */
html, body { overflow-x: clip; max-width: 100%; }
#shopify-section-announcement-bar { overflow: hidden; }

.announcement-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  max-width: 100%;
}
.announcement-marquee__viewport {
  display: flex;
  width: max-content;
  padding: 0.75rem 0;               /* even space above + below the line */
}
/* animate only once JS has built & duplicated the track */
.announcement-marquee.is-ready .announcement-marquee__viewport {
  animation: ff-marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.announcement-marquee__unit {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
}
.announcement-marquee__item {
  white-space: nowrap;
  padding: 0 1.2rem;
  text-decoration: none;
}
a.announcement-marquee__item:hover { text-decoration: underline; }
.announcement-marquee__sep {
  opacity: 0.5;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
}
@keyframes ff-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.announcement-marquee:hover .announcement-marquee__viewport {
  animation-play-state: paused;
}
/* failsafe: no JS yet -> center the single unit so it never looks broken */
.announcement-marquee:not(.is-ready) .announcement-marquee__viewport {
  width: 100%;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .announcement-marquee .announcement-marquee__viewport {
    animation: none !important;
    width: 100%;
    justify-content: center;
  }
}

/* ---- LIVE "in stock" dot ------------------------------------------ */
.ff-has-live-dot { align-items: center; gap: 0.5rem; }
.ff-live-dot {
  position: relative; display: inline-block;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #00c814; flex: 0 0 auto;
  animation: ff-dot-pulse 1.6s ease-in-out infinite;
}
.ff-live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #00c814; animation: ff-dot-ring 1.6s ease-out infinite;
}
@keyframes ff-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.85); }
}
@keyframes ff-dot-ring {
  0%   { opacity: 0.55; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .ff-live-dot { animation: none; }
  .ff-live-dot::after { animation: none; opacity: 0; }
}

/* ---- TEXT BANNER section ------------------------------------------
   Editable statement banner. 5 styles, controllable padding (wucht). */
.ff-textbanner {
  margin: 1rem 1.5rem;
  border-radius: 10px;
  padding: var(--ff-tb-pad, 52px) clamp(1.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ff-textbanner__text {
  /* Editor-gesteuert (Abschnitt "Text Banner" → Schrift).
     Defaults reproduzieren exakt den bisherigen Look. */
  font-family: var(--ff-tb-font, 'Archivo', sans-serif);
  font-weight: var(--ff-tb-weight, 900);
  font-variation-settings: "wght" var(--ff-tb-weight, 900), "wdth" var(--ff-tb-width, 100);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.03em;
  font-size: var(--ff-tb-size, 52px);
  margin: 0;
  max-width: 14ch;
  paint-order: stroke fill;
}
.ff-textbanner--italic .ff-textbanner__text {
  font-style: italic;
  transform: skewX(-7deg);
}

/* --- style: black (white text) --- stroke = editor, default 3.4 --- */
.ff-textbanner--black { background: #0b0b0b; }
.ff-textbanner--black .ff-textbanner__text {
  color: #fff; -webkit-text-stroke: var(--ff-tb-stroke, 3.4px) #fff;
}
/* --- style: strong grey (solid black text) --- */
.ff-textbanner--grey-strong { background: #e2e2e2; }
.ff-textbanner--grey-strong .ff-textbanner__text {
  color: #0b0b0b; -webkit-text-stroke: var(--ff-tb-stroke, 3.4px) #0b0b0b;
}
/* --- style: grey + black border --- */
.ff-textbanner--grey-border {
  background: #f1f1f1; border: 2.5px solid #0b0b0b;
}
.ff-textbanner--grey-border .ff-textbanner__text {
  color: #0b0b0b; -webkit-text-stroke: var(--ff-tb-stroke, 3.4px) #0b0b0b;
}
/* --- style: hollow outline letters on grey (feste eigene Kontur) --- */
.ff-textbanner--grey-outline { background: #e6e6e6; }
.ff-textbanner--grey-outline .ff-textbanner__text {
  color: #e6e6e6; -webkit-text-stroke: 2.2px #0b0b0b;
}
/* --- style: near-white, framed, hollow letters (feste eigene Kontur) --- */
.ff-textbanner--white-frame {
  background: #fafafa; border: 2px solid #0b0b0b;
}
.ff-textbanner--white-frame .ff-textbanner__text {
  color: #fafafa; -webkit-text-stroke: 2.2px #0b0b0b;
}
@media screen and (min-width: 750px) {
  .ff-textbanner__text { font-size: calc(var(--ff-tb-size, 52px) * 1.7); }
  .ff-textbanner { margin: 1.5rem auto; max-width: 1400px; }
}

/* ---- HEADER OPTION C: marquee colour from editor + white header ----
   The announcement bar colours are now editor-controlled via the
   --ff-bar-bg / --ff-bar-fg variables set inline on the element
   (defaults: black bg, white text). Change them anytime in the editor. */
.announcement-marquee,
.announcement-bar.announcement-marquee,
marquee-bar.announcement-marquee,
.announcement-marquee.gradient,
.announcement-marquee.color-accent-2,
.announcement-marquee.color-background-1,
.announcement-marquee.color-background-2,
.announcement-marquee.color-accent-1,
.announcement-marquee.color-inverse {
  background: var(--ff-bar-bg, #0b0b0b) !important;
  background-color: var(--ff-bar-bg, #0b0b0b) !important;
  background-image: none !important;
  color: var(--ff-bar-fg, #fff) !important;
  border-bottom: none !important;
}
.announcement-marquee .announcement-marquee__item,
.announcement-marquee .announcement-bar__message,
.announcement-marquee .announcement-marquee__sep,
.announcement-marquee a { color: var(--ff-bar-fg, #fff) !important; }

.header-wrapper {
  background-color: #fff !important;
  border-bottom: 1.5px solid #0b0b0b !important;
}
.header,
.header__heading-link,
.header__active-menu-item,
.header__menu-item { color: #0b0b0b !important; }
/* icons (search, cart, burger) stay black on the white header */
.header__icon,
.header__icon .icon,
.header__icon--cart .icon,
.menu-drawer__open .icon { color: #0b0b0b !important; }

/* ---- CART remove link (dezent, matches the cart design) ----------- */
.cart-remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(17,17,17,0.12);
  border-radius: 8px;
  background: #fff;
  color: #111;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  text-decoration: none;
}
.cart-remove-link:hover {
  background: #111;
  border-color: #111;
  color: #fff;
}
.cart-remove-link .icon {
  width: 1.7rem;
  height: 1.7rem;
  color: currentColor;
}

/* ---- KH:S GRAIN / RAUSCHEN (header) --------------------------------
   Photocopy-style speckle over the header, generated via SVG turbulence
   (no image file, zero load weight, crisp on retina).
   Controlled from the theme editor: Header section → "Rauschen / Grain"
   (toggle + strength + coarseness). Values arrive as CSS variables
   --khs-noise-amount and --khs-noise-scale, set per-section in header.liquid. */
.header-wrapper {
  position: relative;
}
.header-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above logo/icons, below drawer (z2) + search (z3) */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: calc(240px * var(--khs-noise-scale, 1.4));
  opacity: var(--khs-noise-amount, 0.45);
}

/* ---- KHS: remove the hard line under the header ----
   Kill any border/shadow the header or its sticky state draws, and
   fade the very bottom of the noise layer so it doesn't end in a
   sharp edge that reads as a divider line. */
.header-wrapper,
.header-wrapper--border-bottom,
#shopify-section-header .header-wrapper,
.shopify-section-header-sticky,
#shopify-section-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* NOTE: the noise vertical-fade mask is now set per-section in
   header.liquid's {% style %} block, driven by the editor settings
   (khs_noise_fade + khs_noise_fade_start). No hardcoded mask here. */

/* =================== END KURZHARTSCHNELL LAYER =================== */

/* =================== KHS MOTION LAYER =============================
   Hard cuts, no easing, no fade. Everything snaps.
   Remove this whole block to revert. ================================ */

/* ---- 1. Product card hover: hard cut, no fade, no scale ---------- */
@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img,
  .card-wrapper .media.media--hover-effect > img,
  .card-wrapper:hover .media.media--hover-effect > img + img,
  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transition: none !important;
    transform: none !important;
  }

  .card-wrapper:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
    transition: none !important;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: none !important;
  }

  /* underline snaps in too */
  .card-wrapper:hover .card-information__text {
    transition: none !important;
  }
}

/* ---- 2. Text banner: clip-path wipe reveal on scroll ------------- */
.ff-textbanner {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.ff-textbanner.khs-revealed {
  clip-path: inset(0 0 0 0);
}
/* fallback: if JS never runs, banner must still be visible */
.no-js .ff-textbanner {
  clip-path: none;
}

/* ---- 3. Noise header: slow broken-scanner flicker ---------------- */
@keyframes khs-noise-shift {
  0%   { background-position: 0 0; }
  25%  { background-position: -37px 19px; }
  50%  { background-position: 21px -43px; }
  75%  { background-position: -13px -11px; }
  100% { background-position: 0 0; }
}
.header-wrapper::after {
  animation: khs-noise-shift 2.4s steps(1, end) infinite;
}

/* ---- 4. Sale badge: rare subliminal invert ----------------------- */
@keyframes khs-badge-blink {
  0%, 96%, 100% { filter: none; }
  97%, 99%      { filter: invert(1); }
}
.price .price__badge-sale,
.card__badge .badge {
  animation: khs-badge-blink 8s steps(1, end) infinite;
}

/* ---- accessibility: kill all of it if user asked ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ff-textbanner,
  .ff-textbanner.khs-revealed {
    clip-path: none !important;
    transition: none !important;
  }
  .header-wrapper::after,
  .price .price__badge-sale,
  .card__badge .badge {
    animation: none !important;
  }
}

/* =================== END KHS MOTION LAYER ========================= */

/* =================== KHS: WATER DROPS ==============================
   Condensation layer for the WETPROOF banner. Existing drop geometry,
   positions, trails and motion stay unchanged; light banners use only a
   very subtle cool / pale-blue tint in the water shading.
   Toggled per banner via the "Wassertropfen" setting.
   Remove this block + the markup in text-banner.liquid to revert. */

.ff-textbanner--wet {
  position: relative;
  overflow: hidden;
}

.ff-drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

.ff-drop {
  position: absolute;
  width: var(--d, 12px);
  height: calc(var(--d, 12px) * 1.06);
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* lens shading: bright catch-light top-left, bounce light bottom-right,
     faint darkened rim — this is what sells it as water on grey */
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.95) 0%, rgba(238,247,255,0.34) 20%, rgba(223,239,252,0) 46%),
    radial-gradient(circle at 64% 76%, rgba(224,240,253,0.58) 0%, rgba(220,238,252,0) 36%),
    radial-gradient(circle at 50% 50%, rgba(120,170,205,0.055) 55%, rgba(90,145,185,0.115) 80%, rgba(120,170,205,0.025) 100%);
  box-shadow:
    0 1px 1.5px rgba(70,120,155,0.11),
    inset 0 -0.5px 1px rgba(245,251,255,0.78),
    inset 0 1px 1px rgba(75,125,160,0.065);
}

/* a few beads have run down and left a damp streak above them */
.ff-drop--trail::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 55%;
  width: calc(var(--d, 12px) * 0.26);
  height: calc(var(--d, 12px) * 2.8);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to top, rgba(105,155,190,0.075) 0%, rgba(150,190,215,0.025) 55%, rgba(150,190,215,0) 100%);
}

/* the odd bead lets go and slides a little, then resets */
@keyframes khs-drop-slide {
  0%, 70%  { transform: translate(-50%, -50%); opacity: 1; }
  85%      { transform: translate(-50%, calc(-50% + 22px)); opacity: 1; }
  91%      { transform: translate(-50%, calc(-50% + 30px)); opacity: 0; }
  92%      { transform: translate(-50%, -50%); opacity: 0; }
  100%     { transform: translate(-50%, -50%); opacity: 1; }
}

.ff-drop--slide {
  animation: khs-drop-slide 15s cubic-bezier(0.55, 0, 0.9, 0.4) infinite;
  animation-delay: calc(var(--i, 1) * 1.7s);
}

/* on the black banner style the beads would need inverted shading,
   so keep the effect to the light variants only */
.ff-textbanner--black .ff-drop {
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.16) 20%, rgba(255,255,255,0) 48%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.12) 82%, rgba(255,255,255,0) 100%);
  box-shadow:
    0 1px 1.5px rgba(0,0,0,0.35),
    inset 0 -0.5px 1px rgba(255,255,255,0.30);
}
.ff-textbanner--black .ff-drop--trail::before {
  background: linear-gradient(to top, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
}

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

/* =================== END KHS WATER DROPS ========================= */

/* =================== KHS: PDP LIGHTBOX + INFO ======================
   Remove this block to revert. ================================== */

/* ---- Lightbox: dark backdrop so the photo is the only thing lit --
   The gallery app writes --rio-lightbox-background-color onto :root
   at runtime. html[…] beats a plain :root selector on specificity,
   so this wins without needing !important on the variable itself. */
html:root {
  --rio-lightbox-background-color: rgba(10, 10, 10, 0.94);
}

/* ---- Info accordion: tighter list, correct icon ------------------ */
.product__accordion .accordion__content ul,
.product__accordion .accordion__content ol {
  margin: 0 !important;
  padding-left: 1.6rem !important;
}

.product__accordion .accordion__content li {
  margin: 0 0 0.4rem !important;
  padding-left: 0.2rem;
  line-height: 1.45 !important;
  font-size: 1.35rem !important;
}

.product__accordion .accordion__content li:last-child {
  margin-bottom: 0 !important;
}

.product__accordion .accordion__content li::marker {
  color: rgba(17, 17, 17, 0.45);
}

.product__accordion .accordion__content > p {
  margin: 0 0 0.6rem !important;
  line-height: 1.45 !important;
}

.product__accordion .accordion__content {
  padding-top: 1.2rem !important;
  padding-bottom: 1.4rem !important;
}

/* =================== END KHS PDP LIGHTBOX + INFO ================= */

/* =================== KHS: STICKY ADD-TO-BAG + SHEEN ================
   Mobile: the add-to-bag button detaches and sticks to the bottom of
   the screen while scrolling the product page, so it's always reachable.
   The black button carries a slow metallic sheen (variant A).
   Desktop is left untouched. Remove this block + the JS hook to revert.
   =============================================================== */

/* ---- metallic sheen on the black submit button (all viewports) ---- */
.product-form__submit.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px !important;   /* mono style: kantiger als Pille */
  /* Black is the resting state (coherent with the brand); a chrome/steel
     plate fills the button for a moment when the item is added — so the
     metallic finish is a deliberate confirmation, not a permanent colour. */
  background: linear-gradient(180deg, #232323 0%, #111 44%, #050505 100%) !important;
  transition: transform 0.12s cubic-bezier(0.3, 0, 0.3, 1),
              background 0.18s linear !important;
}
/* tactile press: the button dips slightly under the finger */
.product-form__submit.button:active {
  transform: scale(0.97);
}
/* confirmation: a quick white flash settles onto a steel-grey plate while the "added" state shows */
.product-form__submit.button.khs-added {
  background: #3a3a3d !important;
}
/* the white flash: a full-cover layer that blinks once and fades, revealing the steel grey beneath */
.product-form__submit.button.khs-added::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #ffffff;
  opacity: 0;
  animation: khs-added-flash 0.5s ease forwards;
}
@keyframes khs-added-flash {
  0%   { opacity: 1; }
  42%  { opacity: 0.92; }
  100% { opacity: 0; }
}
/* the label swaps to "IN BAG ✓" during that moment */
.product-form__submit.button .khs-added-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
  font: inherit;
  letter-spacing: 0.16em;
  color: #ffffff !important;
}
.product-form__submit.button.khs-added .khs-added-label { opacity: 1; }
.product-form__submit.button.khs-added > *:not(.khs-added-label):not(.khs-ripple) { opacity: 0; }

/* ripple that expands from the tap point */
.khs-ripple {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.28);
  transform: translate(-50%, -50%) scale(0);
  animation: khs-ripple-go 0.55s ease-out;
  pointer-events: none;
}
@keyframes khs-ripple-go {
  to { transform: translate(-50%, -50%) scale(14); opacity: 0; }
}

/* keep the label + arrow above the sheen layer */
.product-form__submit.button > * {
  position: relative;
  z-index: 3;
}
.product-form__submit.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,0.03) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.03) 55%,
    transparent 62%, transparent 100%
  );
  background-size: 250% 100%;
  background-position: 140% 0;
  animation: khs-btn-sheen 5.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes khs-btn-sheen {
  0%   { background-position: 140% 0; }
  55%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
/* don't wash out the disabled / sold-out state */
.product-form__submit.button[disabled],
.product-form__submit.button[aria-disabled="true"] {
  background: #8d8d8d !important;
}
.product-form__submit.button[disabled]::before,
.product-form__submit.button[aria-disabled="true"]::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .product-form__submit.button:active { transform: none; }
  .khs-ripple { display: none; }
}

/* ---- pinned add-to-bag, mobile only (flicker-proof: no JS state) ----
   The real button bar is fixed to the bottom of the screen the whole
   time on mobile. There is no show/hide, no clone, no scroll handler —
   so there is nothing that can flicker. The page gets bottom padding so
   the fixed bar never covers the last content. */
@media screen and (max-width: 749px) {
  body.khs-atb-pinned {
    /* room so the pinned bar doesn't sit on top of the footer or title */
    padding-bottom: 10rem;
  }
  body.khs-atb-pinned .product-form__buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0 !important;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    background: linear-gradient(to top, rgb(var(--color-background)) 68%, rgba(var(--color-background), 0));
    /* hidden by default: slid down + transparent, non-interactive. Shows only
       once JS adds body.khs-atb-visible (inline button scrolled out of view). */
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.3, 0, 0.3, 1),
                opacity 0.22s linear;
  }
  body.khs-atb-pinned.khs-atb-visible .product-form__buttons {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    body.khs-atb-pinned .product-form__buttons { transition: none; }
  }
  body.khs-atb-pinned .product-form__buttons .product-form__submit {
    margin: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  }
}

/* =================== END KHS STICKY ADD-TO-BAG =================== */

/* =================== KHS: HEADER LOGO TAP =========================
   Replaces the rectangular tap-highlight / focus box on the logo with a
   press-down + dim (scale 0.92 + opacity 0.55, 0.18s). No grey box.
   ============================================================== */
.header__heading-link {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.3, 0, 0.3, 1),
              opacity 0.18s linear;
  border-radius: 0.6rem; /* soften any residual focus ring corners */
}
.header__heading-link:active,
.header__heading-link.khs-pressed {
  transform: scale(0.92);
  opacity: 0.55;
}
/* kill the rectangular focus box on tap (keep a subtle ring only for
   keyboard focus-visible, so accessibility isn't lost) */
.header__heading-link.focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}
.header__heading-link.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.2rem;
  box-shadow: none; /* no rectangular drop-shadow */
  border-radius: 0.6rem;
}
@media (prefers-reduced-motion: reduce) {
  .header__heading-link:active,
  .header__heading-link.khs-pressed { transform: none; }
}

/* =================== END KHS HEADER LOGO TAP ==================== */

/* =================== KHS: FIRST-VISIT INTRO =======================
   Single opacity fade. No blur, no transform, no veil element.
   filter/transform on an ancestor create a containing block for
   position:fixed descendants -- that is what broke the drawer and the
   scroll bar in the old version. opacity does not, so the sticky
   header, cart drawer and overlays stay where they belong.
   Do NOT add will-change: opacity here -- that would reintroduce the
   containing block. The hold class is set inline in theme.liquid
   before first paint; this file only describes the two states.
   Runs once per session, skipped for prefers-reduced-motion.
   ============================================================== */
html.khs-intro-hold body {
  opacity: 0;
}
html.khs-intro-in body {
  opacity: 1;
  transition: opacity var(--khs-intro-dur, 180ms) var(--khs-intro-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
@media (prefers-reduced-motion: reduce) {
  html.khs-intro-hold body,
  html.khs-intro-in body {
    opacity: 1;
    transition: none;
  }
}
/* =================== END KHS FIRST-VISIT INTRO ================== */

/* ============================================================
   KHS INVERT CARD (Variante C) + editor-controlled corner radius
   Title + price become a solid black label directly under the
   image; image corners rounded via --khs-card-radius (theme setting).
   ============================================================ */

/* lay the card out: image first, black label block underneath */
ul.product-grid > li .card-wrapper{
  display:flex;
  flex-direction:column;
}
ul.product-grid > li .card-wrapper .card{
  order:1;              /* image block on top */
  margin:0 !important;
}
ul.product-grid > li .card-wrapper .card-information{
  order:2;              /* label under the image */
  margin:0 !important;
  padding:0 !important;
}

/* editor-controlled rounded corners on the image — TOP only. The bottom
   sits flush against the black label, so it must stay square; otherwise the
   image's rounded bottom corners leave a white gap over the label corners. */
ul.product-grid .card,
ul.product-grid .card__inner,
ul.product-grid .card .media,
ul.product-grid .card__media-full-spacer{
  border-radius:var(--khs-card-radius, 0px) var(--khs-card-radius, 0px) 0 0 !important;
  overflow:hidden !important;
}

/* ============================================================
   KHS CARD LABEL — bombproof stacked (title small, price below)
   Every competing rule (h5 scale, absolute price, flex-row,
   centering) is explicitly overridden. Fixed px, forced column.
   ============================================================ */
ul.product-grid li .card-wrapper .card-information{
  display:block !important;
  position:static !important;
  background:#1c1c1e !important;
  color:#ffffff !important;
  padding:11px 13px 12px !important;
  margin:0 !important;
  border-radius:0 0 var(--khs-card-bottom-radius, 6px) var(--khs-card-bottom-radius, 6px) !important;
  text-align:left !important;
}
/* wrapper: force a simple vertical column, kill any grid/absolute */
ul.product-grid li .card-wrapper .card-information .card-information__wrapper{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:6px !important;
  position:static !important;
  text-align:left !important;
  width:100% !important;
}
/* every direct child sits static & full width, stacked in source order */
ul.product-grid li .card-wrapper .card-information .card-information__wrapper > *{
  position:static !important;
  width:100% !important;
  margin:0 !important;
  float:none !important;
  order:0 !important;
}

/* TITLE — small, bold, left. Beats .h5 + heading-scale (px, high specificity) */
ul.product-grid li .card-wrapper .card-information .card-information__text,
ul.product-grid li .card-wrapper .card-information .card-information__text.h5,
ul.product-grid li .card-wrapper .card-information .card-information__text a{
  display:block !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:900 !important;
  font-style:normal !important;
  text-transform:uppercase !important;
  font-size:13px !important;
  line-height:1.18 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  color:#ffffff !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* PRICE — own line under the title, left, static (never absolute/floated) */
ul.product-grid li .card-wrapper .card-information .price{
  display:block !important;
  position:static !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  color:#ffffff !important;
}
ul.product-grid li .card-wrapper .card-information .price *{
  color:#ffffff !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  float:none !important;
}
/* show exactly ONE price block: regular by default, sale when on sale */
ul.product-grid li .card-wrapper .card-information .price__regular{
  display:block !important;
}
ul.product-grid li .card-wrapper .card-information .price__sale{
  display:none !important;
}
ul.product-grid li .card-wrapper .card-information .price.price--on-sale .price__regular{
  display:none !important;
}
ul.product-grid li .card-wrapper .card-information .price.price--on-sale .price__sale{
  display:block !important;
}
/* hide the screen-reader-only spans so they don't render as stray prices */
ul.product-grid li .card-wrapper .card-information .price .visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
/* SALE: struck compare-at muted, then sale price */
ul.product-grid li .card-wrapper .card-information .price .price-item--regular{
  font-weight:600 !important;
}
ul.product-grid li .card-wrapper .card-information .price s.price-item--regular,
ul.product-grid li .card-wrapper .card-information .price .price__sale .price-item--regular{
  opacity:0.5 !important;
  text-decoration:line-through !important;
  margin-right:0.4rem !important;
}

/* hide vendor/rating clutter + the hidden a11y spans that could add gaps */
ul.product-grid li .card-wrapper .card-information .caption-with-letter-spacing,
ul.product-grid li .card-wrapper .card-information .caption-large,
ul.product-grid li .card-wrapper .card-information .rating,
ul.product-grid li .card-wrapper .card-information .rating-text,
ul.product-grid li .card-wrapper .card-information .rating-count,
ul.product-grid li .card-wrapper .card-information .unit-price{
  display:none !important;
}
   KHS PDP POLISH — accordions (square blocks) + material datasheet
   (jewelry only) + sale price + add-to-bag with price.
   ============================================================ */

/* ---- C: accordions as squared, connected blocks (all products) ---- */
.product__accordion.accordion{
  border:none !important;
  border-radius:0 !important;
  margin:0 0 -1.5px 0 !important;
  background:#fff !important;
}
.product__accordion .accordion__content{
  border:1.5px solid #0e0e0f !important;
  border-top:none !important;
  padding:14px 17px 16px !important;
}

/* ---- C (material datasheet) — JEWELRY ONLY (exclude stickers) ---- */
/* hero bar: the first <p> that carries "316L Stainless Steel" */
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content > p:first-child{
  background:#0e0e0f !important;
  color:#ffffff !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:0.01em !important;
  font-size:13px !important;
  line-height:1.25 !important;
  text-align:center !important;
  margin:-14px -17px 0 !important;   /* pull to block edges */
  padding:13px 17px !important;
}
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content > p:first-child strong{
  font-weight:900 !important;
}
/* the spec list becomes key/value rows with divider lines */
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content ul{
  list-style:none !important;
  padding:0 !important;
  margin:14px 0 0 !important;
}
/* V2: each list item is one centered, uppercase line (no key/value split) */
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content ul li{
  display:block !important;
  text-align:center !important;
  padding:9px 0 !important;
  margin:0 !important;
  border-bottom:1px solid rgba(0,0,0,0.08) !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:600 !important;
  font-size:13px !important;
  text-transform:uppercase !important;
  letter-spacing:0.04em !important;
  line-height:1.3 !important;
  color:#0e0e0f !important;
}
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content ul li:last-child{
  border-bottom:none !important;
}
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content ul li::marker{
  content:"" !important;
}
/* <strong> no longer a "key" — just a subtle bold accent, inline, centered */
body:not(.template-suffix--sticker):not(.template-suffix--sticker-pack) .product__accordion.khs-material-tab .accordion__content ul li strong{
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:0.04em !important;
  font-size:inherit !important;
  opacity:1 !important;
  margin:0 !important;
  display:inline !important;
  white-space:normal !important;
}

/* ---- A: sale price — clear, hard black SALE tag ---- */
.template-product .price--on-sale .price__sale,
.template-product [class*='price'] .price__sale{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.template-product .price .price-item--regular{
  /* the struck compare-at price */
}
.template-product .price--on-sale .price-item--regular{
  color:#aaa !important;
  text-decoration:line-through !important;
  font-weight:600 !important;
}
.template-product .price--on-sale .price-item--sale{
  font-weight:900 !important;
}
/* restyle any existing SALE badge to a hard black tag */
.template-product .price__badge-sale,
.template-product .badge--sale,
.template-product span.badge{
  background:#0e0e0f !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:0 !important;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.12em !important;
  font-size:10px !important;
  padding:4px 9px !important;
}

/* ---- E: add-to-bag button with price ("Add to Bag ... 20,00€ →") ---- */
.product-form__submit .khs-atb-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
}
.product-form__submit .khs-atb-label{
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif !important;
  font-weight:900 !important;
  letter-spacing:0.04em !important;
}
.product-form__submit .khs-atb-arrow{
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif !important;
  font-weight:900 !important;
  margin-left:2px !important;
}
/* when the added-flash confirmation shows, hide the price/arrow so only IN BAG ✓ reads */
.product-form__submit.khs-added .khs-atb-inner{ opacity:0 !important; }

/* ============================================================
   KHS PRE-ORDER BANNER (square, black header + editable body)
   ============================================================ */
.khs-preorder-banner{
  max-width:460px;
  margin:0 auto;
  border:1.5px solid #0e0e0f;
}
.khs-preorder-head{
  background:#0e0e0f;
  color:#ffffff;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:12px;
  padding:11px 16px;
  display:flex;
  align-items:center;
  gap:9px;
}
.khs-preorder-dot{
  width:8px;height:8px;border-radius:50%;
  background:#3ea54a;
  flex:none;
  display:inline-block;
}
.khs-preorder-body{
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:500;
  font-size:13px;
  line-height:1.55;
  padding:13px 16px;
}
.khs-preorder-body p{ margin:0 0 8px; }
.khs-preorder-body p:last-child{ margin:0; }
.khs-preorder-body strong{ font-weight:900; }

/* ============================================================
   KHS CATEGORY BADGE — underlined label, top-left on image
   (rings + chains only; stickers get none via Liquid)
   ============================================================ */
ul.product-grid .card__inner{
  position:relative !important;
}
.khs-cat-badge{
  position:absolute;
  bottom:11px;
  left:12px;
  z-index:3;
  color:#0e0e0f;
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:10px;
  line-height:1;
  pointer-events:none;
}
/* the media wrapper the badge sits in needs relative positioning */
ul.product-grid .card__inner .card__media-full-spacer,
ul.product-grid .card__inner > div:has(> .khs-cat-badge){
  position:relative !important;
}
.khs-cat-badge::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  background:#0e0e0f;
  margin-top:3px;
}



/* ============================================================
   KHS PAGE NOISE + FROSTED HEADER (v3 — popup-safe via ::before)
   Frost is a separate ::before layer behind the header content, so it
   never creates an overflow/filter context that traps the menu drawer,
   cart notification, or search modal.
   ============================================================ */

/* --- global top noise: page-level, fades downward, behind everything --- */
.khs-page-noise{
  position:absolute;
  top:0; left:0; right:0;
  height:300px;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:336px;
  opacity:0.45;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}

/* --- turn OFF old in-header noise --- */
.header-wrapper::after{ display:none !important; }

/* --- sticky wrapper transparent, untouched --- */
#shopify-section-header .header-wrapper{ background:transparent !important; }

/* --- inner .header: island shape + frosted ::before, NO overflow clip --- */
.header-wrapper .header{
  position:relative;
  border-radius:16px !important;
  margin:10px !important;
  padding-left:16px !important;
  padding-right:16px !important;
  z-index:1;
}
.header-wrapper .header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:16px;
  background:rgba(255,255,255,0.62);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
          backdrop-filter:blur(12px) saturate(115%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
  pointer-events:none;
  /* reduce scroll jank from backdrop-filter repaint */
  will-change:transform;
  transform:translateZ(0);
}

/* --- kill any white bg around logo/icons so they don't box on the glass --- */
.header-wrapper .header > *:not(.khs-glass){ background:transparent !important; }
.header__heading, .header__heading-link, .header__logo-image{ background:transparent !important; }

/* ============================================================
   POPUP SAFETY + KHS DRAWER · Variant A "Capsule Echo"
   The drawer must ESCAPE the header glass (no backdrop-filter, opaque
   bg, readable text) — but instead of forcing it flat & square, we
   give it its own floating-capsule shape that echoes the header pill.
   Works in every header mode (frost / capsule / scroll / section)
   because it anchors to the header's real 10px island margin, not to
   a mode class.
   ============================================================ */
.menu-drawer{
  /* escape the glass */
  background:rgb(var(--color-background)) !important;
  color:rgb(var(--color-foreground)) !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  z-index:100 !important;

  /* floating capsule shape */
  top:calc(100% + 0.4rem) !important;   /* just under the header island */
  left:var(--khs-drawer-left, 10px) !important;   /* editor: Menü-Drawer → Abstand links */
  width:calc(100vw - var(--khs-drawer-left, 10px) - var(--khs-drawer-gutter, 74px)) !important; /* left gap + right gutter */
  height:auto !important;
  max-height:calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 100%) - 1.2rem) !important;
  margin:0 !important;
  border:0 !important;
  border-radius:var(--khs-radius, 16px) !important;
  box-shadow:0 16px 30px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08) !important;
  overflow:hidden !important;
}
@media screen and (min-width:750px){
  .menu-drawer{ width:40rem !important; }
}

/* inner containers: let the panel size to content, scroll inside */
.menu-drawer__inner-container{ height:auto !important; }
.menu-drawer__navigation-container{
  grid-template-rows:1fr auto !important;
  max-height:calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 100%) - 1.2rem) !important;
  overflow-y:auto !important;
}

/* ensure all drawer text uses the readable foreground color */
.menu-drawer *, .menu-drawer a, .menu-drawer summary,
.menu-drawer__menu-item, .menu-drawer__menu-item a{
  color:rgb(var(--color-foreground)) !important;
}
.menu-drawer-container{ position:static !important; }

/* ---- top-level items: big type, airy rhythm, hairline separators ---- */
.menu-drawer__navigation{ padding:1.4rem 0 0.6rem !important; }
.menu-drawer__menu > li{ margin-bottom:0 !important; }
.menu-drawer__menu > li + li > .menu-drawer__menu-item,
.menu-drawer__menu > li + li > details > .menu-drawer__menu-item{
  border-top:1px solid rgba(var(--color-foreground),0.06);
}
.menu-drawer__menu-item{
  font-size:3.2rem !important;
  font-weight:800 !important;
  letter-spacing:-0.01em !important;
  line-height:1 !important;
  padding:1.9rem 2.2rem !important;
  justify-content:flex-start !important;
}
.menu-drawer summary.menu-drawer__menu-item{ padding-right:5.2rem !important; }
.menu-drawer__menu-item > .icon-arrow{ right:2.2rem !important; opacity:0.32; }

/* ---- footer utility zone: soft tint, hairline, login + socials ---- */
.menu-drawer__utility-links{
  padding:1.8rem 2.2rem !important;
  border-top:1px solid rgba(var(--color-foreground),0.06) !important;
  background-color:rgba(var(--color-foreground),0.025) !important;
}
.menu-drawer .list-social{ margin-top:1.2rem !important; }

/* ---- submenu panels: fill the capsule, round the right edge ---- */
.js .menu-drawer__submenu{
  border-radius:0 var(--khs-radius, 16px) var(--khs-radius, 16px) 0 !important;
}

@media screen and (min-width:750px){
  .menu-drawer__menu-item{ font-size:2.6rem !important; padding:1.5rem 2.2rem !important; }
}

.cart-notification-wrapper{ background:transparent !important; z-index:101 !important; }

/* ------------------------------------------------------------
   POPUP SAFETY — bleed-through fix (drawer + cart notification)
   Symptom: with the menu drawer or cart notification open, three
   elements punched through the dimmed overlay — the payment-badge
   row (Hoppy app embed), the gallery counter pill (1/3), and the
   gallery zoom/expand button. All three sat at z-index:3 while the
   drawer's dim layer was only z-index:2, so they out-stacked it.
   Fix has three independent parts; remove any part to revert it.
   ------------------------------------------------------------ */

/* 1) Raise the drawer's dim backdrop above all z:3 page content
      (badges + gallery badges) but keep it just under the drawer
      panel itself (panel is z:100 in the block above). */
.js menu-drawer > details > summary::before,
.js menu-drawer > details[open]:not(.menu-opening) > summary::before{
  z-index:99 !important;
}

/* 2) Give the mobile gallery its own stacking context so its
      internal badges (counter/zoom at z:3) stay contained and can
      never compete with a page-level overlay. Purely containment —
      internal layering (badge-over-image) is unchanged. */
.khsg{ isolation:isolate; }

/* 3) The payment-badge row is injected by the trust-badges app, so
      there's no theme class to isolate. Instead, while an overlay is
      open, drop the whole product info column into its own stacking
      context at z:0 so nothing inside it (badges included) can float
      above the overlay tier. Two triggers, matching what the theme
      actually sets:
        - menu drawer  -> body.khs-drawer-locked  (custom scroll lock;
          note Dawn's overflow-hidden is intentionally NOT used here,
          to keep the sticky header from dropping)
        - cart notif   -> #cart-notification.active (no body flag set)
      The rule is inert whenever neither overlay is open. Split into
      two independent rules so that if an old engine doesn't grok
      :has(), it drops only the cart rule, not the drawer rule. */
body.khs-drawer-locked .product__info-container{
  position:relative;
  z-index:0;
}
body:has(#cart-notification.active) .product__info-container{
  position:relative;
  z-index:0;
}

.search-modal{
  background:#ffffff !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  z-index:100 !important;
}

/* ============================================================
   KHS CART NOTIFICATION — full custom build (khscart-*)
   Independent of Dawn's .button--secondary + color-scheme system,
   which was forcing white-on-white via CSS variables. All colors
   are hard-coded here. Nothing inherits from the header scheme.
   ============================================================ */

/* positioning: solid card, margins both sides on mobile, no overflow */
#cart-notification.khscart{
  background:#ffffff !important;
  border:1.5px solid #0e0e0f !important;
  border-radius:12px !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.18) !important;
  overflow:hidden !important;
  padding:0 !important;
  width:auto !important;
  left:12px !important;
  right:12px !important;
  margin:0 auto !important;
}
@media screen and (min-width:750px){
  #cart-notification.khscart{
    left:auto !important;
    right:4rem !important;
    max-width:36.8rem !important;
  }
}

/* header: black bar, blue checkmark, white title, white close */
.khscart .khscart__header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  padding:11px 14px !important;
  background:#0e0e0f !important;
}
.khscart .khscart__heading{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#ffffff !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:0.08em !important;
  font-size:11px !important;
  margin:0 !important;
}
.khscart .khscart__heading svg{
  width:13px !important; height:13px !important;
  color:#002bff !important;
}
.khscart .khscart__close{
  background:none !important;
  border:none !important;
  padding:4px !important;
  margin:0 !important;
  color:#ffffff !important;
  cursor:pointer !important;
  flex:none !important;
}
.khscart .khscart__close svg{ width:15px !important; height:15px !important; }

/* product row: image + name + options (JS fills this) */
.khscart .khscart__product{ padding:16px 14px !important; }
/* target the cart-item directly (JS-injected) so flex reliably applies */
#cart-notification-product .cart-item,
.khscart .cart-item,
.khscart [id^="cart-notification-product"]{
  display:flex !important;
  flex-direction:row !important;
  gap:16px !important;
  align-items:flex-start !important;
}
/* the text column next to the image gets room and vertical breathing */
#cart-notification-product .cart-item > div,
.khscart .cart-item > div{
  flex:1 1 auto !important;
  min-width:0 !important;
  padding-top:4px !important;
}
.khscart .cart-notification-product__image{
  width:64px !important; height:64px !important;
  border-radius:8px !important;
  border:1px solid rgba(0,0,0,0.1) !important;
  object-fit:cover !important;
  flex:none !important;
}
.khscart .cart-notification-product__name{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  font-size:13px !important;
  margin:0 0 6px !important;
  line-height:1.15 !important;
  color:#0e0e0f !important;
}
.khscart .product-option{ font-size:11px !important; opacity:0.6 !important; color:#0e0e0f !important; }
.khscart .product-option dt, .khscart .product-option dd{
  display:inline !important; margin:0 !important; font-weight:500 !important;
}

/* buttons row */
.khscart .khscart__links{
  display:flex !important;
  gap:8px !important;
  padding:0 14px 14px !important;
  margin:0 !important;
}
.khscart .khscart__links form{ flex:1 !important; margin:0 !important; }

/* MY OWN buttons — hard colors, no variables, no inheritance */
.khscart .khscart__btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:13px 10px !important;
  border-radius:8px !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:0.04em !important;
  font-size:12px !important;
  line-height:1.1 !important;
  text-align:center !important;
  text-decoration:none !important;
  cursor:pointer !important;
  min-height:44px !important;
}
/* outline = "check my cart" — white bg, DARK text (the bug, now fixed for good) */
.khscart .khscart__btn--outline{
  flex:1 !important;
  background:#ffffff !important;
  color:#0e0e0f !important;
  border:1.5px solid #0e0e0f !important;
}
/* solid = "check out now" — black bg, white text */
.khscart .khscart__btn--solid{
  background:#0e0e0f !important;
  color:#ffffff !important;
  border:1.5px solid #0e0e0f !important;
}

/* ============================================================
   KHS MENU DRAWER — Variant A (white, full height, footer pinned)
   Fixes: drawer running off at the bottom, no clean edge, footer
   (login + social) floating. Structure: header → flexible nav →
   pinned footer, solid white bg full height.
   ============================================================ */

/* drawer: solid white, full viewport height, column layout */
.menu-drawer{
  background:#ffffff !important;
  height:100% !important;
  min-height:100vh !important;
}
.menu-drawer__inner-container{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:100vh !important;
  background:#ffffff !important;
}
/* navigation takes the available space, pushing footer down */
.menu-drawer__navigation-container{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  justify-content:flex-start !important;
}
.menu-drawer__navigation{
  flex:1 1 auto !important;
  padding-top:8px !important;
}
/* menu items: clear separators */
.menu-drawer__menu-item{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}
.menu-drawer > .menu-drawer__inner-container > .menu-drawer__navigation-container > .menu-drawer__navigation > .menu-drawer__menu > li > .menu-drawer__menu-item{
  border-bottom:1px solid #f0f0f0 !important;
}

/* footer (login + social): pinned at bottom, black top border */
.menu-drawer__utility-links{
  flex:none !important;
  margin-top:auto !important;
  border-top:1.5px solid #0e0e0f !important;
  background:#ffffff !important;
  padding:18px 24px !important;
}
.menu-drawer__account{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.05em !important;
  color:#0e0e0f !important;
}

/* ============================================================
   KHS CART CHECKOUT BUTTONS — even spacing across all 5 buttons
   (custom CHECK OUT NOW + Shop Pay / Apple Pay / PayPal / G Pay)
   ============================================================ */
/* consistent max-width so all buttons align */
.cart__ctas,
.cart__ctas .cart__checkout-button,
.cart__dynamic-checkout-buttons{
  max-width:36rem !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* uniform gap: space between checkout block and the express buttons */
.cart__dynamic-checkout-buttons{
  margin-top:0.8rem !important;
}
/* uniform gap between each express button */
.cart__dynamic-checkout-buttons > * + *{
  margin-top:0.8rem !important;
}
/* each express button same height feel as checkout */
.cart__dynamic-checkout-buttons div[role='button']{
  min-height:5rem !important;
}

/* ============================================================
   KHS PRODUCT GALLERY DOTS — Variant B (round dots, active larger)
   Replaces the bar-style indicator with clean round dots; the active
   dot is enlarged and filled black. Applies to the product slider.
   ============================================================ */
/* the dots container */
.slider-counter--dots{
  display:flex !important;
  gap:9px !important;
  align-items:center !important;
  justify-content:center !important;
}
/* each dot link — reset any bar look */
.slider-counter__link--dots{
  width:auto !important;
  height:auto !important;
  padding:4px !important;
  background:transparent !important;
  border:none !important;
}
/* the visible dot */
.slider-counter__link--dots .dot{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:rgba(14,14,15,0.28) !important;
  border:none !important;
  display:block !important;
  transition:width 0.2s ease, height 0.2s ease, background 0.2s ease !important;
}
/* active dot — larger + solid black */
.slider-counter__link--active.slider-counter__link--dots .dot{
  width:10px !important;
  height:10px !important;
  background:#0e0e0f !important;
}

/* ============================================================
   KHS FOOTER LOCALIZATION — clean rebuild (stacked, centered, black)
   Country + language selectors, rebuilt from scratch:
   - the two selectors STACK vertically, centered
   - each = small grey label above + bold BLACK value underlined below
   - the dropdown panel opens centered directly above its own button
     (no more jumping in from the right)
   ============================================================ */

/* ---- 1. the column: stack both selectors, centered ---- */
.footer__localization{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:24px !important;
  text-align:center !important;
  width:100% !important;
}
/* each localization-form is a centered, self-contained block */
.footer__localization localization-form,
.footer__localization noscript{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
}
.footer__localization .no-js-hidden{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

/* ---- 2. the small label above (grey, spaced) ---- */
.footer__localization h2.caption-large,
.footer__localization .localization-form h2{
  display:block !important;
  text-align:center !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.16em !important;
  font-size:9px !important;
  color:#0e0e0f !important;
  opacity:0.45 !important;
  margin:0 0 8px !important;
}

/* ---- 3. the disclosure wrapper: relative anchor, centered ---- */
.footer__localization .disclosure{
  position:relative !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

/* ---- 4. the value button: bold BLACK, underlined, centered ---- */
.footer__localization .disclosure__button,
.footer__localization .localization-form__select,
.footer__localization .localization-selector.link,
.footer__localization noscript select.localization-selector{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:auto !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 0 3px 0 !important;
  margin:0 auto !important;
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid #0e0e0f !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:0.02em !important;
  font-size:15px !important;
  color:#0e0e0f !important;
  opacity:1 !important;
  text-align:center !important;
  text-align-last:center !important;
  -webkit-appearance:none !important;
     -moz-appearance:none !important;
          appearance:none !important;
  cursor:pointer !important;
}
/* force the value text + everything inside black */
.footer__localization .disclosure__button *,
.footer__localization .localization-form__select *{
  color:#0e0e0f !important;
  opacity:1 !important;
}
.footer__localization .disclosure__button:hover,
.footer__localization .disclosure__button:focus,
.footer__localization .localization-selector.link:hover,
.footer__localization .localization-selector.link:focus{
  box-shadow:none !important;
  outline:transparent !important;
}

/* ---- 5. the caret: black, sits next to the value ---- */
.footer__localization .icon-caret{
  position:static !important;
  width:11px !important;
  height:11px !important;
  margin:0 !important;
  flex:none !important;
}
.footer__localization .icon-caret,
.footer__localization svg.icon-caret{
  color:#0e0e0f !important;
  fill:#0e0e0f !important;
}
.footer__localization .icon-caret polyline,
.footer__localization .icon-caret path,
.footer__localization svg.icon-caret polyline,
.footer__localization svg.icon-caret path{
  stroke:#0e0e0f !important;
}

/* ---- 6. THE DROPDOWN PANEL: centered above its own button ---- */
.footer__localization .disclosure__list{
  position:absolute !important;
  bottom:100% !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) translateY(-0.8rem) !important;
  margin:0 !important;
  min-width:24rem !important;
  max-width:30rem !important;
  max-height:22rem !important;
  overflow-y:auto !important;
  background:#fff !important;
  border:1.5px solid #0e0e0f !important;
  border-radius:10px !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.14) !important;
  padding:6px 0 !important;
  z-index:5 !important;
  text-align:center !important;
}
/* KILL the Dawn open-animation: its keyframe animates `transform` to
   translateY() only, dropping our translateX(-50%) for the whole animation,
   so the panel sits off to the right and only snaps to center when the
   animation ends. Also drop the margin-left:1rem that shoved it right.
   Both come from section-footer.css (loaded after base.css) so they need
   !important to lose. Result: panel is centered from frame one, no jump. */
.footer__localization .localization-selector + .disclosure__list,
.footer__localization .disclosure__list{
  animation:none !important;
  margin-left:0 !important;
  opacity:1 !important;
}
/* the list items: black, centered, bold */
.footer__localization .disclosure__item{
  text-align:center !important;
}
.footer__localization .disclosure__link{
  display:block !important;
  text-align:center !important;
  padding:10px 18px !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.04em !important;
  font-size:12px !important;
  color:#0e0e0f !important;
  opacity:1 !important;
  text-decoration:none !important;
}
.footer__localization .disclosure__link *{
  color:#0e0e0f !important;
  opacity:1 !important;
}
.footer__localization .disclosure__link:hover,
.footer__localization .disclosure__link--active{
  background:rgba(14,14,15,0.06) !important;
}


/* ============================================================
   KHS HEADER JITTER FIX — isolate header from marquee repaints
   The homepage runs infinite marquee transform-animations. On iOS a
   position:sticky header with backdrop-filter repaints every animation
   frame those cause → visible jitter. Giving the marquees their own
   compositing layer (and the header a contained one) stops the marquee
   repaints from invalidating the header's backdrop-filter.
   ============================================================ */
.marquee-words,
.announcement-marquee__viewport{
  will-change: transform !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.marquee-container,
.announcement-marquee{
  contain: paint layout style !important;
  isolation: isolate !important;
}

/* KHS: a little more breathing room between the gallery photo and the dots */
.pwzrswiper-pagination.pwzrswiper-pagination-bullets,
.pwzrswiper-container-horizontal > .pwzrswiper-pagination-bullets,
.pwzrswiper-pagination{
  margin-top:12px !important;
  padding-top:4px !important;
  bottom:-4px !important;
}

/* ============================================================
   KHS SALE BADGE — move from bottom-left to top-right
   The category badge (CHAIN/RING) lives bottom-left, so the sale/
   sold-out badge sits in the top-right corner to avoid collision.
   ============================================================ */
ul.product-grid .card__badge{
  top:1rem !important;
  right:1rem !important;
  bottom:auto !important;
  left:auto !important;
  justify-content:flex-end !important;
}
ul.product-grid .card__badge .badge{
  margin-right:0 !important;
}

/* ============================================================
   KHS CARD POLISH (v107) — tappability + finish, aura intact.
   All rules scoped to ul.product-grid so the product page's own
   SALE tag / buttons are untouched. Five parts, each removable.
   ============================================================ */

/* --- 1) Softer press: 0.9 was a big lurch on the 2-up grid. 0.96
       reads as a deliberate press without the jump. Keeps the
       existing darken-on-press; just retunes the scale. The two
       rules below WIN over the earlier 0.9 block (later in file,
       same specificity). ------------------------------------- */
ul.product-grid > li .card-wrapper:active,
ul.product-grid > li .card-wrapper.khs-pressed{
  transform:scale(0.96) !important;
}

/* --- 2) Press acknowledged as ONE object: on tap the black label
       darkens in step with the image, so the whole card reacts as
       a single monolith instead of just the photo dimming. ---- */
ul.product-grid > li .card-wrapper .card-information{
  transition:background-color 0.18s cubic-bezier(0.32,0,0.24,1),
             filter 0.18s cubic-bezier(0.32,0,0.24,1),
             transform 0.2s cubic-bezier(0.32,0,0.24,1);
}
ul.product-grid > li .card-wrapper:active .card-information,
ul.product-grid > li .card-wrapper.khs-pressed .card-information{
  background:#0e0e0f !important;   /* one notch darker than #1c1c1e */
}

/* --- 3) Keyboard / switch access: a hard 2px ink outline on
       focus-visible (not a soft glow — fits the hard language).
       Pointer taps don't trigger :focus-visible, so mouse/touch
       users never see it. ---------------------------------- */
ul.product-grid > li .card-wrapper:focus-within{
  outline:none; /* reset; we draw the ring on the real focus target */
}
ul.product-grid > li .card-wrapper a.full-unstyled-link:focus-visible{
  outline:2px solid #0e0e0f;
  outline-offset:2px;
  border-radius:1px;
}

/* --- 4) Close the image/label seam: sub-pixel rounding can leave a
       ~0.5px light hairline between the photo block and the black
       label on some screens. Pull the label up 1px so the card
       reads as one printed object. Radius still matches. ----- */
ul.product-grid li .card-wrapper .card-information{
  margin-top:-1px !important;
}

/* --- 5) SALE chip: same PILL shape as before, colours inverted
       (black fill, white text). No blink — static. Scoped to the
       sale/sold-out badges in the grid; product page untouched. -- */
ul.product-grid .card__badge .badge{
  border:none !important;
  border-radius:999px !important;             /* original pill shape */
  background:#0e0e0f !important;              /* inverted: was light, now black */
  color:#ffffff !important;                   /* inverted: white text */
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.12em !important;
  font-size:10px !important;
  padding:6px 14px !important;
  box-shadow:none !important;
}


/* Reduced-motion guard for the retuned press: my 0.96 rule above is
   later + !important, so it would otherwise beat the existing
   prefers-reduced-motion reset. Re-neutralize the scale here; the
   label darken (a color change, not motion) is allowed to remain. */
@media (prefers-reduced-motion: reduce){
  ul.product-grid > li .card-wrapper:active,
  ul.product-grid > li .card-wrapper.khs-pressed{
    transform:none !important;
  }
  ul.product-grid > li .card-wrapper .card-information{
    transition:background-color 0.18s linear !important;
  }
}

/* ============================================================
   KHS CARD CORNER FIX (v109) — kill the light corner slivers.
   Cause: .media > img carried its own radius (2mm ≈ 7.5px), which
   is TIGHTER than the card radius. .media is clipped correctly, but
   the image's smaller corners let .media's faint grey background
   (rgba(color-foreground,.1)) peek through at all four corners —
   that's the "white at the corners". Fix: in the grid, the image
   fills to the container edge and shares the card radius, so there
   is no gap and nothing to peek. Scoped to ul.product-grid only —
   the product-page gallery keeps its own rounding. --------------- */
ul.product-grid .card .media,
ul.product-grid .card__inner .media{
  background:transparent !important;   /* no grey plate to reveal */
}
ul.product-grid .card .media > img,
ul.product-grid .card__inner .media > img,
ul.product-grid .card .media > *:not(.zoom):not(.deferred-media__poster-button){
  border-radius:var(--khs-card-radius, 0px) var(--khs-card-radius, 0px) 0 0 !important;  /* top only; bottom meets the label */
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* ============================================================
   KHS HEADER MODES  (engine: khs-adaptive-header.js)
   Selected via the section setting "Header-Stil" → data-khs-mode.
   Three looks share this block:
     .khs-mode-frost    – one static, legible mid-tone glass
     .khs-mode-scroll   – crossfades light/dark by scroll depth
     .khs-mode-section  – crossfades light/dark by section tone
   The two switching modes use the .khs-glass layers + .khs-on-dark.
   ------------------------------------------------------------ */

/* When any mode is on, we control the header background ourselves,
   so suppress the theme's static ::before glass. */
.header-wrapper .header.khs-header-on::before{
  display:none !important;
}
.header-wrapper .header.khs-header-on{
  position:relative;
}

/* ---------- STATIC GLASS (frost) + selectable TEXTURES ---------- */
/* The static glass panel. Its look is set by a texture class
   (.khs-tex-*) chosen in the editor; this is the "Standard" default.
   Corner radius comes from --khs-radius (editor slider). All textures
   render on this single ::after via layered backgrounds, because the
   header's ::before is the theme's own (suppressed) glass. */
.header-wrapper .header.khs-mode-frost::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:var(--khs-radius, 16px);
  background:rgba(150,150,152,0.30);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 4px 20px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(0,0,0,0.04);
}
/* legibility halo for dark marks — on for all light/mid textures,
   turned off again by the dark Smoke texture further down. */
.header.khs-mode-frost .header__heading-link,
.header.khs-mode-frost .header__heading{
  text-shadow:0 1px 2px rgba(255,255,255,0.55);
}
.header.khs-mode-frost .header__icon .icon,
.header.khs-mode-frost .header__icon svg{
  filter:drop-shadow(0 1px 1.5px rgba(255,255,255,0.55));
}

/* A · Liquid Glass — heavy blur, high saturation, top sheen + rim light */
.header.khs-mode-frost.khs-tex-liquid::after{
  background:linear-gradient(155deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 42%),rgba(255,255,255,0.28);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 20px rgba(0,0,0,0.12);
}
/* B · Frosted Pane — matte grain over the blur */
.header.khs-mode-frost.khs-tex-frosted::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),rgba(230,230,228,0.36);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
          backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* C · Dichroic Tint — iridescent blue→violet wash (brand blue dissolved) */
.header.khs-mode-frost.khs-tex-dichroic::after{
  background:linear-gradient(120deg,rgba(0,43,255,0.12),rgba(255,255,255,0.16) 42%,rgba(120,0,255,0.12));
  -webkit-backdrop-filter:blur(17px) saturate(150%);
          backdrop-filter:blur(17px) saturate(150%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:inset 0 0 0 1px rgba(0,43,255,0.12), 0 4px 18px rgba(0,0,0,0.10);
}
/* D · Edge-Lit — near-clear centre, glowing inner rim */
.header.khs-mode-frost.khs-tex-edgelit::after{
  background:rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:inset 0 0 14px rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.42), 0 4px 16px rgba(0,0,0,0.10);
}
/* E · Deep Smoke — dark tinted glass; marks go white, halo removed */
.header.khs-mode-frost.khs-tex-smoke::after{
  background:rgba(20,20,22,0.46);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
          backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 6px 22px rgba(0,0,0,0.22);
}
.header.khs-mode-frost.khs-tex-smoke .header__heading-link,
.header.khs-mode-frost.khs-tex-smoke .header__heading{
  color:#fff !important; text-shadow:none;
}
.header.khs-mode-frost.khs-tex-smoke .header__icon,
.header.khs-mode-frost.khs-tex-smoke .header__icon .icon,
.header.khs-mode-frost.khs-tex-smoke .header__icon svg{
  color:#fff !important; stroke:currentColor; filter:none;
}
.header.khs-mode-frost.khs-tex-smoke .header__heading-logo{
  filter:invert(1) brightness(1.6);
}
/* F · Facet Lines — clear glass with etched diagonal facets */
.header.khs-mode-frost.khs-tex-facet::after{
  background:repeating-linear-gradient(58deg,transparent 0 22px,rgba(255,255,255,0.5) 22px 23px),repeating-linear-gradient(-58deg,transparent 0 34px,rgba(255,255,255,0.35) 34px 35px),rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F2 · Pinstripe — dense vertical hairlines, like reeded/ribbed glass */
.header.khs-mode-frost.khs-tex-pinstripe::after{
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,0.5) 6px 6.6px),rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F3 · Grid — fine square cross-hatch */
.header.khs-mode-frost.khs-tex-grid::after{
  background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,0.45) 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,0.45) 13px 14px),rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F5 · Prism Shards — irregular wide angled facets, like cut crystal */
.header.khs-mode-frost.khs-tex-prism::after{
  background:linear-gradient(66deg,transparent 40%,rgba(255,255,255,0.5) 41%,transparent 42%),linear-gradient(66deg,transparent 62%,rgba(255,255,255,0.35) 63%,transparent 64%),linear-gradient(-58deg,transparent 30%,rgba(255,255,255,0.4) 31%,transparent 32%),linear-gradient(-58deg,transparent 74%,rgba(255,255,255,0.3) 75%,transparent 76%),rgba(255,255,255,0.2);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,0.42);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F6 · Dot Matrix — etched dot grid, technical/screen-like */
.header.khs-mode-frost.khs-tex-dotmatrix::after{
  background:radial-gradient(rgba(255,255,255,0.55) 1px,transparent 1.4px),rgba(255,255,255,0.18);
  background-size:11px 11px, auto;
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F7 · Concentric — radial etched rings emanating from centre */
.header.khs-mode-frost.khs-tex-rings::after{
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 12px,rgba(255,255,255,0.45) 12px 13px),rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* F8 · Louver — thin horizontal blinds */
.header.khs-mode-frost.khs-tex-louver::after{
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0.5) 0 1px,transparent 1px 5px),rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(15px) saturate(140%);
          backdrop-filter:blur(15px) saturate(140%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* G · Gradient Mesh — soft warm/cool colour mesh bleeding through */
.header.khs-mode-frost.khs-tex-mesh::after{
  background:radial-gradient(60% 120% at 15% 0%,rgba(255,220,180,0.30),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(0,43,255,0.16),transparent 60%),rgba(255,255,255,0.14);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.38);
  box-shadow:0 4px 18px rgba(0,0,0,0.10);
}
/* H · Ultra-Clear / Wet — minimal blur, high transparency, glossy top */
.header.khs-mode-frost.khs-tex-wet::after{
  background:linear-gradient(180deg,rgba(255,255,255,0.42) 0%,rgba(255,255,255,0) 45%),rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(7px) saturate(125%);
          backdrop-filter:blur(7px) saturate(125%);
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 6px 20px rgba(0,0,0,0.14);
}

/* ---------- MODE: FLOATING CAPSULE ---------- */
/* A small, strongly-rounded pill that floats above the page with a soft
   drop shadow — reads like a physical object sitting on the page.
   Radius / shadow / side inset / background are set from the editor via
   the inline {%- style -%} block in header.liquid (this is the fallback). */
.header-wrapper .header.khs-mode-capsule::after{
  content:"";
  position:absolute;
  inset:0 10px;                 /* side inset — overridden inline */
  z-index:-1;
  border-radius:29px;           /* overridden inline */
  background:#ffffff;           /* overridden inline */
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 16px 30px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08); /* overridden inline */
}
/* pull the whole header down a touch so the capsule visibly floats */
.header-wrapper .header.khs-mode-capsule{
  margin-top:4px;
}

/* round the header island itself to match the radius slider
   (static + switching glass; capsule manages its own radius) */
.header-wrapper .header.khs-header-on.khs-mode-frost,
.header-wrapper .header.khs-header-on.khs-mode-scroll,
.header-wrapper .header.khs-header-on.khs-mode-section{
  border-radius:var(--khs-radius, 16px);
}

/* ---------- MODES 2 & 3: crossfading glass ---------- */
.khs-glass{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:var(--khs-radius, 16px);
  -webkit-backdrop-filter:blur(13px) saturate(120%);
          backdrop-filter:blur(13px) saturate(120%);
  pointer-events:none;
  will-change:opacity;
  transform:translateZ(0);
  transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
.khs-glass--light{
  opacity:1;
  background:rgba(255,255,255,0.60) !important;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
}
.khs-glass--dark{
  opacity:0;
  background:rgba(18,18,19,0.55) !important;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 6px 22px rgba(0,0,0,0.22);
}
.header.khs-on-dark .khs-glass--dark{ opacity:1; }
.header.khs-on-dark .khs-glass--light{ opacity:0; }

/* colour swap when dark glass is active (both switching modes) */
.header.khs-header-on .header__heading-link,
.header.khs-header-on .header__heading{
  transition:color .5s cubic-bezier(.4,0,.2,1);
}
.header.khs-on-dark .header__heading-link,
.header.khs-on-dark .header__heading,
.header.khs-on-dark .h2{
  color:#fff !important;
}
.header.khs-header-on .header__icon,
.header.khs-header-on .header__icon .icon{
  transition:color .5s cubic-bezier(.4,0,.2,1);
}
.header.khs-on-dark .header__icon,
.header.khs-on-dark .header__icon .icon,
.header.khs-on-dark .header__icon-cart,
.header.khs-on-dark .header__icon svg{
  color:#fff !important;
  stroke:currentColor;
}
.header.khs-header-on .cart-count-bubble{
  transition:background .5s, color .5s;
}
.header.khs-on-dark .cart-count-bubble{
  background:#fff !important;
  color:#0e0e0f !important;
}

/* logo image inversion in dark mode — opt-in for dark PNG logos */
.header.khs-header-on .header__heading-logo{
  transition:filter .5s cubic-bezier(.4,0,.2,1);
}
.header.khs-header-on[data-khs-invert-logo="1"].khs-on-dark .header__heading-logo{
  filter:invert(1) brightness(1.6);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .khs-glass,
  .header.khs-header-on .header__heading-link,
  .header.khs-header-on .header__icon{
    transition-duration:.12s !important;
  }
}

/* ================= KHS LEGAL PAGES (v137) ================= */
.khs-legal-page {
  padding-top: clamp(3.2rem, 6vw, 7.2rem);
  padding-bottom: clamp(5rem, 9vw, 10rem);
}
.khs-legal-copy {
  max-width: 76rem;
  margin-inline: auto;
  color: rgb(var(--color-foreground));
}
.khs-legal-copy h2 {
  margin-top: 3.6rem;
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.15;
}
.khs-legal-copy p,
.khs-legal-copy li { line-height: 1.65; }
.khs-legal-copy a:not(.button) {
  color: inherit;
  text-decoration-thickness: .1rem;
  text-underline-offset: .25rem;
}
.khs-legal-updated,
.khs-legal-note { color: rgba(var(--color-foreground), .68); }
.khs-withdrawal-button {
  display: inline-flex;
  width: auto;
  min-height: 4.8rem;
  margin: 1rem 0 .4rem;
  padding-inline: 2.2rem;
  background: #000;
  color: #fff;
  border-radius: 1.4rem;
  text-decoration: none;
}
/* ================= END KHS LEGAL PAGES ================= */

/* =================== KHS: BUTTON-SYSTEM v141 ========================
   Ein Token-Satz für ALLE Kauf-Buttons. Vorher liefen vier Typen auf
   vier Höhen (50 / 54 / 55 / 50) und zwei Radien (14 / 0).

   Die Höhe ist von OBEN gedeckelt: Shopifys Express-Buttons klemmen
   sich intern auf clamp(25px, --shopify-accelerated-checkout-button-
   block-size, 55px). Über 55px kommt keiner mit. Von unten drückt die
   Daumenfläche (Apple 44pt, Material 48px Minimum). Fenster = 48–55px,
   gewählt: 54px, mit 1px Luft zur Decke.

   Zum Zurückbauen: diesen Block löschen. Die Werte hier sind die
   einzige Stelle, an der Höhe/Radius/Abstand stehen.
   ================================================================= */
:root {
  --khs-btn-h: 54px;      /* Decke ist 55px — nicht erhöhen */
  --khs-btn-r: 14px;
  --khs-btn-gap: 8px;
  --khs-btn-fs: 15px;
  --khs-btn-track: 0.04em;
  --khs-btn-max: 36rem;
  --khs-bar-pad: 12px;
  --khs-btn-face: linear-gradient(180deg, #232323 0%, #111 44%, #050505 100%);
  /* Alternative Flaeche — eine Zeile tauschen, sonst nichts:
     --khs-btn-face: linear-gradient(180deg, #33333a 0%, #26262c 44%, #1b1b20 100%); */
  --khs-shimmer-op: 0.28;   /* Staerke des Lichtstreifens */
  --khs-shimmer-ms: 3200ms; /* Umlauf */
  --khs-shimmer-w: 40%;     /* Breite des Streifens */
  --khs-btn-blue: #002BFF;   /* nur unterwegs */
  --khs-btn-steel: #3A3A3D;  /* nur in der Bestätigung */
}

/* ---- 1. Alle vier Typen auf eine Höhe -----------------------------
   height statt min-height + Polster: sonst rechnet jede Schriftgrösse
   eine andere Höhe aus und die Buttons driften wieder auseinander. */
.product-form__submit.button,
button.khs-inline-atb,
.cart__ctas .cart__checkout-button,
.cart__checkout-button,
button#checkout {
  height: var(--khs-btn-h) !important;
  min-height: var(--khs-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: var(--khs-btn-r) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--khs-btn-fs) !important;
  letter-spacing: var(--khs-btn-track) !important;
  line-height: 1 !important;
}

/* ---- 2. Inline-Button = Sticky-Button ------------------------------
   Der Inline-Button steht in section-main-product.css, die NACH
   base.css lädt. Deshalb hier mit button.* eine Stufe höher greifen,
   statt die Datei anzufassen (bekannte Klammer-Unwucht aus v79). */
button.khs-inline-atb {
  margin: 16px 0 4px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  background: var(--khs-btn-face) !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
button.khs-inline-atb > * { position: relative; z-index: 3; }

/* Wichtig: die drei Overlay-Ebenen dürfen NICHT von der Regel darüber
   erwischt werden — position:relative würde Ripple und Spinner aus der
   Fläche heraus in den Textfluss setzen. Höhere Spezifität als beide
   "> *"-Regeln (auch die bestehende am Sticky-Button). */
.product-form__submit.button > .khs-ripple,
button.khs-inline-atb > .khs-ripple {
  position: absolute !important;
  z-index: 2 !important;
}
.product-form__submit.button > .khs-added-label,
button.khs-inline-atb > .khs-added-label {
  position: absolute !important;
  z-index: 3 !important;
}
.product-form__submit.button > .khs-spin,
button.khs-inline-atb > .khs-spin {
  position: absolute !important;
  z-index: 4 !important;
}

/* Sheen — hatte bisher nur der Sticky-Button */
button.khs-inline-atb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,0.03) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.03) 55%,
    transparent 62%, transparent 100%
  );
  background-size: 250% 100%;
  background-position: 140% 0;
  animation: khs-btn-sheen 5.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

/* ---- 3. Checkout im ADD-TO-BAG-Format ------------------------------
   War: eckig (radius 0), 1,5px Rahmen, 55px. Jetzt: gleiche Kante,
   gleiche Höhe, kein Rahmen — der Rahmen hat auf gleicher Fläche nur
   einen halben Pixel Unterschied zum Sticky-Button erzeugt. */
.cart__ctas .cart__checkout-button,
.cart__checkout-button,
button#checkout {
  border: 0 !important;
  background: var(--khs-btn-face) !important;
  font-weight: 900 !important;
}

/* Das gewohnte Schimmern bleibt — hier neu aufgesetzt, damit alle
   Werte an einer Stelle stehen und die Format-Umstellung es nicht
   abraeumt. Bewusst OHNE z-index: der Text im Checkout-Button ist ein
   nackter Textknoten ohne Wrapper, also laeuft der Streifen ueber die
   Schrift statt darunter. Genau so sah es immer aus — beim Add-to-Bag
   liegt der Sheen dagegen unter dem Label, weil dort ein <span> sitzt.
   Der Button ist der einzige animierte im Warenkorb-Stapel: Shop Pay,
   Apple Pay, PayPal und G Pay stecken in geschlossener Shadow DOM und
   lassen sich nicht animieren. Genau das hebt ihn heraus. */
.cart__checkout-button::before,
button#checkout::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: var(--khs-shimmer-w) !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, var(--khs-shimmer-op)),
    transparent
  ) !important;
  transform: skewX(-20deg) !important;
  animation: khs-checkout-shimmer var(--khs-shimmer-ms) ease-in-out infinite !important;
  pointer-events: none !important;
}
/* overflow: der Streifen darf nicht ueber die neue runde Ecke laufen */
.cart__checkout-button,
button#checkout {
  overflow: hidden !important;
}

/* Sheen am Add-to-Bag laeuft ueber dieselben Token */
.product-form__submit.button::before,
button.khs-inline-atb::before {
  background: linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255, 255, 255, calc(var(--khs-shimmer-op) * 0.14)) 45%,
    rgba(255, 255, 255, var(--khs-shimmer-op)) 50%,
    rgba(255, 255, 255, calc(var(--khs-shimmer-op) * 0.14)) 55%,
    transparent 62%, transparent 100%
  ) !important;
  background-size: 250% 100% !important;
}

/* ---- 4. Express-Buttons auf dieselben Masse ------------------------
   Shop Pay / Apple Pay / PayPal / G Pay stecken in einer geschlossenen
   Shadow DOM. Nur diese Custom Properties kommen durch — normales CSS
   auf die Innereien wirkt nicht. */
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--khs-btn-h);
  --shopify-accelerated-checkout-button-border-radius: var(--khs-btn-r);
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-row-gap: var(--khs-btn-gap);
  --shopify-accelerated-checkout-inline-alignment: center;
}
/* Fallback für ältere Payment-Buttons, die noch im Light DOM sitzen */
.shopify-payment-button__button {
  border-radius: var(--khs-btn-r) !important;
  height: var(--khs-btn-h) !important;
  min-height: var(--khs-btn-h) !important;
}
/* Wrapper: gleiche Höhe, gleicher Abstand, keine Alt-Werte mehr */
.cart__dynamic-checkout-buttons div[role='button'] {
  min-height: var(--khs-btn-h) !important;
  border-radius: var(--khs-btn-r) !important;
  overflow: hidden !important;
}
.cart__dynamic-checkout-buttons { margin-top: var(--khs-btn-gap) !important; }
.cart__dynamic-checkout-buttons > * + * { margin-top: var(--khs-btn-gap) !important; }

/* ---- 5. „03 Unterwegs": Blau nur, solange etwas passiert -----------
   Ruhe = schwarz. Laden = #002BFF. Bestätigung = Stahl. Zurück zu
   schwarz. Die Farbe markiert die Sekunde, in der man nicht weiss, ob
   es geklappt hat — sie ist nirgends sonst im Shop. */
.product-form__submit.button.khs-loading,
button.khs-inline-atb.khs-loading {
  background: var(--khs-btn-blue) !important;
}
/* Sheen aus, solange geladen wird: zwei Bewegungen gleichzeitig sind Unruhe */
.product-form__submit.button.khs-loading::before,
button.khs-inline-atb.khs-loading::before {
  opacity: 0;
}
/* Label weicht dem Spinner */
.product-form__submit.button.khs-loading .khs-atb-inner,
button.khs-inline-atb.khs-loading .khs-inline-atb__label,
button.khs-inline-atb.khs-loading .khs-inline-atb__arrow {
  opacity: 0 !important;
}
.khs-spin {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.khs-loading .khs-spin { display: flex; }
.khs-spin i {
  width: 19px;
  height: 19px;
  border: 2.5px solid rgba(255, 255, 255, 0.34);
  border-top-color: #fff;
  border-radius: 50%;
  animation: khs-spin 0.62s linear infinite;
}
@keyframes khs-spin { to { transform: rotate(360deg); } }

/* Der Inline-Button bekommt jetzt auch Bestätigung und Ripple */
button.khs-inline-atb .khs-added-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
  font: inherit;
  letter-spacing: 0.16em;
  color: #fff;
}
button.khs-inline-atb.khs-added { background: var(--khs-btn-steel) !important; }
button.khs-inline-atb.khs-added .khs-added-label { opacity: 1; }
button.khs-inline-atb.khs-added .khs-inline-atb__label,
button.khs-inline-atb.khs-added .khs-inline-atb__arrow { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .khs-spin i { animation: none; border-top-color: rgba(255,255,255,0.34); }
  button.khs-inline-atb::before { animation: none; }
}

/* ---- 6. Sticky-Leiste: Platz exakt aus den Tokens rechnen ----------
   Vorher stand hier padding-bottom: 10rem = 100px, während die Leiste
   16+54+16+34 = 120px hoch war. Die letzten 20px Inhalt lagen unter
   der Leiste. Jetzt wird es gerechnet statt geschätzt. */
@media screen and (max-width: 749px) {
  body.khs-atb-pinned {
    padding-bottom: calc(
      var(--khs-btn-h) + (var(--khs-bar-pad) * 2) + env(safe-area-inset-bottom, 0px) + 24px
    ) !important;
  }
  body.khs-atb-pinned .product-form__buttons {
    padding: var(--khs-bar-pad) 16px calc(var(--khs-bar-pad) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =================== END KHS BUTTON-SYSTEM v141 =================== */

/* ================= KHS CART RECOMMENDATIONS GUTTER =================
   Keep the mobile product rail away from the viewport edges without
   changing the shared featured-collection or slider behaviour. */
@media screen and (max-width: 749px) {
  #shopify-section-featured-products .collection.page-width {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek .grid__item:first-of-type {
    padding-left: 0 !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek .grid__item:last-of-type {
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  #shopify-section-featured-products .collection.page-width {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek .grid__item:first-of-type {
    padding-left: 0 !important;
  }

  #shopify-section-featured-products .slider--tablet.grid--peek .grid__item:last-of-type {
    padding-right: 0 !important;
  }
}
/* =============== END KHS CART RECOMMENDATIONS GUTTER =============== */