.wp-block-kahustack-appearance-control,
.kahu-appearance-control {
  display: none;
  position: relative;
  align-items: center;
  color: var(--kahu-color-text);
  font: 600 .8125rem/1 var(--wp--preset--font-family--interface);
}

.js .wp-block-kahustack-appearance-control,
.js .kahu-appearance-control { display: inline-flex; }

.kahu-appearance-control .lucide {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.kahu-appearance-trigger,
.kahu-appearance-switch {
  appearance: none;
  border: 1px solid var(--kahu-color-border);
  background: var(--kahu-color-surface);
  color: var(--kahu-color-text);
  box-shadow: none;
  cursor: pointer;
}

.kahu-appearance-trigger {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem;
  border-radius: .4rem;
}

.kahu-appearance-control--compact .kahu-appearance-trigger {
  padding-inline: .75rem;
}

.kahu-appearance-trigger:hover,
.kahu-appearance-switch:hover {
  background: var(--kahu-color-surface-muted);
}

.kahu-appearance-chevron {
  width: .875rem !important;
  height: .875rem !important;
  color: var(--kahu-color-text-muted);
}

.kahu-appearance-popover {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: 0;
  z-index: 100;
  min-width: 11rem;
  padding: .375rem;
  border: 1px solid var(--kahu-color-border);
  border-radius: .5rem;
  background: var(--kahu-color-surface);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .16);
}

.kahu-appearance-list,
.kahu-appearance-segmented {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kahu-appearance-list__title {
  display: block;
  padding: .5rem .625rem .375rem;
  color: var(--kahu-color-text-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kahu-appearance-option,
.kahu-appearance-segment {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  cursor: pointer;
}

.kahu-appearance-option {
  min-height: 2.25rem;
  padding: .55rem .625rem;
  border-radius: .35rem;
}

.kahu-appearance-option:hover,
.kahu-appearance-option:has(.kahu-appearance-input:focus-visible) {
  background: var(--kahu-color-surface-muted);
}

.kahu-appearance-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kahu-appearance-check {
  margin-inline-start: auto;
  visibility: hidden;
}

.kahu-appearance-option[data-selected] .kahu-appearance-check,
.kahu-appearance-option:has(.kahu-appearance-input:checked) .kahu-appearance-check {
  visibility: visible;
}

.kahu-appearance-segmented {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--kahu-color-border);
  border-radius: .5rem;
  background: var(--kahu-color-surface-muted);
}

.kahu-appearance-segment {
  min-height: 2.125rem;
  padding: .5rem .625rem;
  border-radius: .3rem;
  color: var(--kahu-color-text-muted);
}

.kahu-appearance-segment:has(.kahu-appearance-input:checked) {
  background: var(--kahu-color-surface);
  color: var(--kahu-color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}

.kahu-appearance-segment:has(.kahu-appearance-input:focus-visible) {
  outline: 2px solid var(--kahu-color-focus);
  outline-offset: 2px;
}

.kahu-appearance-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .45rem .625rem;
  border-radius: 999px;
}

.kahu-appearance-switch__icon {
  display: inline-flex;
  color: var(--kahu-color-text-muted);
}

.kahu-appearance-switch__track {
  position: relative;
  width: 2.1rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--kahu-color-border);
}

.kahu-appearance-switch__thumb {
  position: absolute;
  inset-block-start: .15rem;
  inset-inline-start: .15rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--kahu-color-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .22);
  transition: transform 160ms ease;
}

.kahu-appearance-switch[aria-checked="true"] .kahu-appearance-switch__thumb {
  transform: translateX(.9rem);
}

[dir="rtl"] .kahu-appearance-switch[aria-checked="true"] .kahu-appearance-switch__thumb {
  transform: translateX(-.9rem);
}

.kahu-appearance-switch[aria-checked="false"] .kahu-appearance-switch__icon--light,
.kahu-appearance-switch[aria-checked="true"] .kahu-appearance-switch__icon--dark {
  color: var(--kahu-color-text);
}

@media (max-width: 480px) {
  .kahu-appearance-segment span { display: none; }
  .kahu-appearance-segment { padding-inline: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kahu-appearance-switch__thumb { transition: none; }
}