.nayeli-kf {
  --nkf-border: #dedbd2;
  --nkf-text: #24211d;
  --nkf-muted: #6f6a61;
  --nkf-bg: #fff;
  --nkf-accent: #2f6f73;
  color: var(--nkf-text);
}

.nayeli-kf__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nayeli-kf__group,
.nayeli-kf__source {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nayeli-kf button {
  border: 1px solid var(--nkf-border);
  background: var(--nkf-bg);
  color: var(--nkf-text);
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
}

.nayeli-kf button.is-active {
  border-color: var(--nkf-accent);
  background: var(--nkf-accent);
  color: #fff;
}

.nayeli-kf__count {
  margin: 0 0 12px;
  color: var(--nkf-muted);
  font-size: 13px;
}

.nayeli-kf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.nayeli-kf__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nkf-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.nayeli-kf__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f6f3ee;
}

.nayeli-kf__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 10px;
}

.nayeli-kf__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
}

.nayeli-kf__meta {
  color: var(--nkf-muted);
  font-size: 13px;
  margin-top: 2px;
}

.nayeli-kf__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
  margin-top: 8px;
}

.nayeli-kf__badge {
  border-radius: 999px;
  background: #e6f0ef;
  color: #24575a;
  padding: 4px 7px;
  font-size: 12px;
  line-height: 1;
}

.nayeli-kf__badge--muted {
  background: #f1eee8;
  color: var(--nkf-muted);
}

.nayeli-kf__search {
  position: relative;
  flex: 1 1 100%;
  min-width: 180px;
  order: 10;
}

.nayeli-kf__search input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--nkf-border);
  border-radius: 4px;
  padding: 8px 34px 8px 10px;
  font: inherit;
  color: var(--nkf-text);
  background: #fff;
}

.nayeli-kf__search-clear,
.nayeli-kf button.nayeli-kf__search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nkf-muted);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
}

.nayeli-kf__search-clear:hover,
.nayeli-kf button.nayeli-kf__search-clear:hover {
  background: #f1eee8;
  color: var(--nkf-text);
}

.nayeli-kf__search-clear[hidden] {
  display: none;
}

.nayeli-kf__filter-set.nayeli-kf__filter-set--finish {
  display: none !important;
}

.nayeli-kf__notice {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--nkf-border);
  border-radius: 4px;
  color: var(--nkf-muted);
  background: #fbfaf7;
}

.nayeli-kf__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.nayeli-kf__image-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nayeli-kf__missing-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--nkf-muted);
  background: #f6f3ee;
  font-size: 13px;
  line-height: 1.3;
}

.nayeli-kf__filter-set {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
}

.nayeli-kf__filter-label {
  color: var(--nkf-muted);
  font-size: 13px;
  line-height: 1.2;
  padding-top: 9px;
}

@media (max-width: 640px) {
  .nayeli-kf__filter-set {
    grid-template-columns: 1fr;
  }

  .nayeli-kf__filter-label {
    padding-top: 0;
  }
}

.nayeli-kf__badge--stock {
  background: #dcefe2;
  color: #285b38;
}

.nayeli-kf__badge--preorder {
  background: #f7e8bf;
  color: #74521a;
}

.nayeli-kf__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 10px;
}

.nayeli-kf__count {
  margin: 0;
}

.nayeli-kf__reset {
  border: 0 !important;
  background: transparent !important;
  color: var(--nkf-accent) !important;
  padding: 4px 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nayeli-kf__price-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #eaf6f8;
  color: #24575a;
  font-size: 13px;
  line-height: 1.35;
}

.nayeli-kf__price-notice span {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #16858d;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.nayeli-kf__source [data-nayeli-kf-status="lagernd"] {
  border-color: #cfe7d5;
  background: #edf8ef;
  color: #2f6b36;
}

.nayeli-kf__source [data-nayeli-kf-status="lagernd"].is-active {
  border-color: #4b9d3a;
  background: #4b9d3a;
  color: #fff;
}

.nayeli-kf__source [data-nayeli-kf-status="vorbestellbar"] {
  border-color: #efdcae;
  background: #fbf2dc;
  color: #7b5514;
}

.nayeli-kf__source [data-nayeli-kf-status="vorbestellbar"].is-active {
  border-color: #d18a1f;
  background: #d18a1f;
  color: #fff;
}

.nayeli-kf__image-filter [data-nayeli-kf-image-filter] {
  border-color: #dfd2ec;
  background: #f4eefb;
  color: #604078;
}

.nayeli-kf__image-filter [data-nayeli-kf-image-filter].is-active {
  border-color: #8c5ab3;
  background: #8c5ab3;
  color: #fff;
}

.nayeli-kf__price {
  margin-top: 8px;
  color: #1f1b18;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}


.nayeli-kf__price del {
  color: var(--nkf-muted);
  font-weight: 400;
}

.nayeli-kf__actions {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 7px;
}

.nayeli-kf__button,
.nayeli-kf a.nayeli-kf__button,
.nayeli-kf button.nayeli-kf__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 5px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nayeli-kf__button--primary,
.nayeli-kf__button--cart,
.nayeli-kf button.nayeli-kf__button--primary,
.nayeli-kf button.nayeli-kf__button--cart {
  border: 1px solid var(--nkf-accent);
  background: var(--nkf-accent);
  color: #fff;
}

.nayeli-kf__button--secondary,
.nayeli-kf a.nayeli-kf__button--secondary {
  border: 1px solid var(--nkf-border);
  background: #fff;
  color: var(--nkf-text);
}

@media (max-width: 640px) {
  .nayeli-kf__summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.nayeli-kf__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.nayeli-kf-panel-open {
  overflow: hidden;
}

.nayeli-kf__panel-overlay {
  --nkf-border: #dedbd2;
  --nkf-text: #24211d;
  --nkf-muted: #6f6a61;
  --nkf-bg: #fff;
  --nkf-accent: #2f6f73;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  background: rgba(30, 27, 24, 0);
  pointer-events: none;
  transition: background 180ms ease;
}

.nayeli-kf__panel-overlay.is-open {
  background: rgba(30, 27, 24, 0.34);
  pointer-events: auto;
}

.nayeli-kf__panel-overlay[hidden] {
  display: none;
}

.nayeli-kf__panel {
  position: relative;
  width: min(350px, calc(100% - 16px));
  height: 100%;
  overflow-y: auto;
  background: #fff;
  box-shadow: -18px 0 36px rgba(36, 33, 29, 0.18);
  transform: translateX(100%);
  transition: transform 180ms ease;
  padding: 14px;
}

.nayeli-kf__panel-overlay.is-open .nayeli-kf__panel {
  transform: translateX(0);
}

.nayeli-kf__panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--nkf-text);
  font-size: 24px;
  line-height: 1;
  z-index: 2;
}

.nayeli-kf__panel-media {
  margin: 0 0 8px;
  border-radius: 7px;
  overflow: hidden;
  background: #f6f3ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nayeli-kf__panel-media img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: block;
}

.nayeli-kf__panel-title {
  margin: 0;
  color: var(--nkf-text);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0;
}

.nayeli-kf__panel-color {
  margin-top: 3px;
  color: var(--nkf-muted);
  font-size: 13px;
  line-height: 1.3;
}

.nayeli-kf__panel-price {
  margin-top: 7px;
  color: #2c2030;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.nayeli-kf__panel-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.nayeli-kf__chooser {
  margin-top: 12px;
}

.nayeli-kf__chooser-title {
  margin-bottom: 7px;
  color: var(--nkf-text);
  font-weight: 700;
  font-size: 13px;
}

.nayeli-kf__option-group {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.nayeli-kf__option-group h3 {
  margin: 0;
  color: var(--nkf-text);
  font-size: 13px;
  line-height: 1.2;
}

.nayeli-kf__delivery {
  margin: -2px 0 2px;
  color: var(--nkf-muted);
  font-size: 13px;
  line-height: 1.3;
}

.nayeli-kf__option,
.nayeli-kf button.nayeli-kf__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--nkf-border);
  border-radius: 6px;
  background: #fff;
  color: var(--nkf-text);
  text-align: left;
}

.nayeli-kf__option.is-active,
.nayeli-kf button.nayeli-kf__option.is-active {
  border-color: var(--nkf-accent);
  background: #eef8f8;
  color: var(--nkf-text);
  box-shadow: inset 0 0 0 1px var(--nkf-accent);
}

.nayeli-kf__option-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nayeli-kf__option-main strong {
  font-size: 13px;
  line-height: 1.2;
}

.nayeli-kf__option-main small {
  color: #3d7935;
  font-size: 12px;
  line-height: 1.2;
}

.nayeli-kf__option-price {
  white-space: nowrap;
  font-weight: 700;
  font-size: 13px;
}

.nayeli-kf__quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.nayeli-kf__quantity label {
  font-weight: 700;
}

.nayeli-kf__quantity-total {
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 0 2px;
  border-top: 1px solid #eee9df;
  color: var(--nkf-muted);
  font-size: 14px;
  line-height: 1.2;
}

.nayeli-kf__quantity-total strong {
  color: var(--nkf-text);
  font-size: 16px;
}

.nayeli-kf__stepper {
  display: grid;
  grid-template-columns: 34px 42px 34px;
  min-height: 34px;
  border: 1px solid var(--nkf-border);
  border-radius: 6px;
  overflow: hidden;
}

.nayeli-kf__stepper button {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  font-size: 18px;
}

.nayeli-kf__stepper span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--nkf-border);
  border-right: 1px solid var(--nkf-border);
  font-weight: 600;
}

.nayeli-kf__panel-cart,
.nayeli-kf button.nayeli-kf__panel-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border: 1px solid var(--nkf-accent);
  border-radius: 6px;
  background: var(--nkf-accent);
  color: #fff;
  font-weight: 700;
}


.nayeli-kf__panel-note {
  margin-top: 6px;
  color: var(--nkf-muted);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.nayeli-kf__panel-note span {
  display: none;
}

.nayeli-kf__panel-note p {
  margin: 0;
}
.nayeli-kf__panel-cart:disabled,
.nayeli-kf button.nayeli-kf__panel-cart:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nayeli-kf__panel-message {
  min-height: 20px;
  margin-top: 7px;
  color: var(--nkf-muted);
  font-size: 13px;
}

.nayeli-kf__panel-message[data-tone="success"] {
  color: #2f6b36;
}

.nayeli-kf__panel-message[data-tone="error"] {
  color: #9a2f2f;
}

@media (max-width: 640px) {
  .nayeli-kf__panel-overlay {
    align-items: flex-end;
  }

  .nayeli-kf__panel {
    width: 100%;
    height: min(90vh, 680px);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    padding: 14px;
  }

  .nayeli-kf__panel-overlay.is-open .nayeli-kf__panel {
    transform: translateY(0);
  }

  .nayeli-kf__panel-title {
    font-size: 21px;
  }
}



.nayeli-kf__panel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.nayeli-kf__panel-tab,
.nayeli-kf button.nayeli-kf__panel-tab {
  min-height: 34px;
  border-radius: 5px;
  padding: 7px 9px;
  font-weight: 700;
}

.nayeli-kf__panel-tab--stock {
  border-color: #cfe7d5;
  background: #edf8ef;
  color: #2f6b36;
}

.nayeli-kf__panel-tab--stock.is-active {
  border-color: #4b9d3a;
  background: #4b9d3a;
  color: #fff;
}

.nayeli-kf__panel-tab--preorder {
  border-color: #efdcae;
  background: #fbf2dc;
  color: #7b5514;
}

.nayeli-kf__panel-tab--preorder.is-active {
  border-color: #d18a1f;
  background: #d18a1f;
  color: #fff;
}

.nayeli-kf__panel .nayeli-kf__missing-image {
  min-height: 150px;
}



.nayeli-kf__group [data-nayeli-kf-category] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nayeli-kf__group [data-nayeli-kf-category]::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(36, 33, 29, 0.25);
  background: var(--nkf-chip-color, #999);
}

.nayeli-kf__group [data-nayeli-kf-category="schwarz"] { --nkf-chip-color: #111; }
.nayeli-kf__group [data-nayeli-kf-category="weiss"] { --nkf-chip-color: #fff; }
.nayeli-kf__group [data-nayeli-kf-category="grau_silber"] { --nkf-chip-color: #8d9298; }
.nayeli-kf__group [data-nayeli-kf-category="blau"] { --nkf-chip-color: #1476b8; }
.nayeli-kf__group [data-nayeli-kf-category="tuerkis"] { --nkf-chip-color: #159b9b; }
.nayeli-kf__group [data-nayeli-kf-category="gruen"] { --nkf-chip-color: #238426; }
.nayeli-kf__group [data-nayeli-kf-category="rot"] { --nkf-chip-color: #b92d28; }
.nayeli-kf__group [data-nayeli-kf-category="pink_rosa"] { --nkf-chip-color: #d95b9e; }
.nayeli-kf__group [data-nayeli-kf-category="lila"] { --nkf-chip-color: #8954b8; }
.nayeli-kf__group [data-nayeli-kf-category="braun"] { --nkf-chip-color: #7b4b2a; }
.nayeli-kf__group [data-nayeli-kf-category="beige"] { --nkf-chip-color: #d7c3a2; }
.nayeli-kf__group [data-nayeli-kf-category="gelb_gold"] { --nkf-chip-color: #d8ad2f; }
.nayeli-kf__group [data-nayeli-kf-category="orange_kupfer"] { --nkf-chip-color: #d56b27; }
.nayeli-kf__group [data-nayeli-kf-category="mehrfarbig"] { --nkf-chip-color: conic-gradient(#111, #1476b8, #238426, #d8ad2f, #b92d28, #111); }

.nayeli-kf button.is-active[data-nayeli-kf-category]::before {
  border-color: rgba(255, 255, 255, 0.9);
}

.nayeli-kf__custom-cut {
  display: grid;
  gap: 5px;
}

.nayeli-kf__custom-cut-label {
  font-weight: 700;
  font-size: 13px;
}

.nayeli-kf__custom-cut-stepper {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  min-height: 44px;
  border: 1px solid var(--nkf-accent);
  border-radius: 6px;
  overflow: hidden;
  background: #eef8f8;
}

.nayeli-kf__custom-cut-stepper button {
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}

.nayeli-kf__custom-cut-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nayeli-kf__custom-cut-stepper span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--nkf-border);
  border-right: 1px solid var(--nkf-border);
  color: var(--nkf-text);
  font-weight: 700;
}
.nayeli-kf__custom-cut small {
  color: var(--nkf-muted);
  font-size: 12px;
}