:root {
  --shopapp-primary: #275d46;
  --shopapp-secondary: #d9efe4;
  --shopapp-accent: #f1a03d;
  --shopapp-background: #f5f3ec;
  --shopapp-surface: #ffffff;
  --shopapp-text: #13231b;
  --shopapp-muted: #647067;
  --shopapp-button: #275d46;
  --shopapp-button-text: #ffffff;
  --shopapp-nav: #19392b;
  --shopapp-nav-text: #f7fff9;
  --shopapp-nav-button-bg: rgba(255,255,255,0.08);
  --shopapp-nav-button-bg-hover: rgba(255,255,255,0.14);
  --shopapp-nav-button-border: rgba(255,255,255,0.18);
  --shopapp-nav-button-text: rgba(255,255,255,0.88);
  --shopapp-nav-button-active: #ffffff;
  --shopapp-nav-button-active-text: #275d46;
  --shopapp-danger: #b94f45;
  --shopapp-border: #d9ded6;
  --shopapp-shadow: 0 18px 40px rgba(19,35,27,0.10);
}

body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.6), transparent 25rem),
    linear-gradient(180deg, var(--shopapp-background) 0%, color-mix(in srgb, var(--shopapp-background) 82%, #fff 18%) 100%);
  color: var(--shopapp-text);
}

.shopapp-panel {
  border: 1px solid var(--shopapp-border);
  background: color-mix(in srgb, var(--shopapp-surface) 92%, #fff 8%);
  box-shadow: var(--shopapp-shadow);
  border-radius: 1.5rem !important;
}

@media (min-width: 1024px) {
  .shopapp-layout-shell {
    border: 1px solid var(--shopapp-border);
    background: color-mix(in srgb, var(--shopapp-surface) 88%, #fff 12%);
    border-radius: 1.5rem;
    box-shadow: var(--shopapp-shadow);
  }
}

.shopapp-button,
.shopapp-button-secondary,
.shopapp-button-danger,
.shopapp-stepper-button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.shopapp-button {
  background: var(--shopapp-button);
  color: var(--shopapp-button-text) !important;
  border-color: var(--shopapp-button);
}

.shopapp-button:hover {
  background: color-mix(in srgb, var(--shopapp-button) 88%, #000 12%);
  border-color: color-mix(in srgb, var(--shopapp-button) 88%, #000 12%);
}

.shopapp-button-secondary {
  background: color-mix(in srgb, var(--shopapp-surface) 96%, #fff 4%);
  color: var(--shopapp-text) !important;
  border-color: var(--shopapp-border);
}

.shopapp-button-secondary:hover {
  background: color-mix(in srgb, var(--shopapp-secondary) 24%, #fff 76%);
  border-color: color-mix(in srgb, var(--shopapp-primary) 22%, var(--shopapp-border) 78%);
}

.shopapp-stepper-button {
  background: color-mix(in srgb, var(--shopapp-nav) 92%, #000 8%);
  color: var(--shopapp-nav-text) !important;
  border-color: color-mix(in srgb, var(--shopapp-nav) 84%, #000 16%);
  box-shadow: 0 10px 20px rgba(15,23,42,0.12);
}

.shopapp-stepper-button:hover {
  background: color-mix(in srgb, var(--shopapp-nav) 84%, #fff 16%);
  border-color: color-mix(in srgb, var(--shopapp-nav) 72%, #fff 28%);
}

.shopapp-button-danger {
  background: color-mix(in srgb, var(--shopapp-danger) 88%, #000 12%);
  color: #fff7f5 !important;
  border-color: color-mix(in srgb, var(--shopapp-danger) 88%, #000 12%);
}

.shopapp-button-danger:hover {
  background: color-mix(in srgb, var(--shopapp-danger) 76%, #000 24%);
  border-color: color-mix(in srgb, var(--shopapp-danger) 76%, #000 24%);
}

.shopapp-button *,
.shopapp-button-secondary *,
.shopapp-button-danger *,
.shopapp-stepper-button * {
  color: inherit !important;
}

.shopapp-button[disabled],
.shopapp-button-secondary[disabled],
.shopapp-button-danger[disabled],
.shopapp-stepper-button[disabled] {
  cursor: default;
  opacity: .65;
  box-shadow: none;
}

.shopapp-button,
.shopapp-button-secondary,
.shopapp-button-danger,
.shopapp-stepper-button,
.shopapp-nav-button {
  min-height: 2.75rem;
}

.shopapp-button--prominent {
  padding: 0.875rem 1rem !important;
  min-height: 3rem;
}

.shopapp-header-panel .bg-white {
  color: var(--shopapp-nav) !important;
}

.shopapp-header-panel .bg-white * {
  color: inherit !important;
}

.shopapp-nav-button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.shopapp-button:focus-visible,
.shopapp-button-secondary:focus-visible,
.shopapp-button-danger:focus-visible,
.shopapp-stepper-button:focus-visible,
.shopapp-nav-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shopapp-accent) 72%, #fff 28%);
  outline-offset: 2px;
}

.shopapp-nav-button--sidebar {
  border: 1px solid var(--shopapp-nav-button-border);
  background: var(--shopapp-nav-button-bg);
  color: var(--shopapp-nav-button-text) !important;
}

.shopapp-nav-button--sidebar:hover {
  background: var(--shopapp-nav-button-bg-hover);
}

.shopapp-nav-button--sidebar.is-active {
  border-color: transparent;
  background: var(--shopapp-nav-button-active);
  color: var(--shopapp-nav-button-active-text) !important;
  box-shadow: 0 10px 22px rgba(10,20,16,0.16);
}

.shopapp-nav-button--sidebar.is-active:hover {
  background: var(--shopapp-nav-button-active);
}

.shopapp-nav-button--sidebar.is-disabled {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.45) !important;
  cursor: default;
  box-shadow: none;
}

.shopapp-nav-button--sidebar.is-disabled:hover {
  background: rgba(255,255,255,0.08);
}

.shopapp-nav-button--mobile {
  border: 1px solid color-mix(in srgb, var(--shopapp-primary) 24%, var(--shopapp-border) 76%);
  background: color-mix(in srgb, var(--shopapp-primary) 10%, #fff 90%);
  color: color-mix(in srgb, var(--shopapp-text) 84%, var(--shopapp-primary) 16%) !important;
  box-shadow: 0 4px 12px rgba(10,20,16,0.08);
}

.shopapp-nav-button--mobile:hover {
  border-color: color-mix(in srgb, var(--shopapp-primary) 36%, var(--shopapp-border) 64%);
  background: color-mix(in srgb, var(--shopapp-primary) 16%, #fff 84%);
}

.shopapp-nav-button--mobile.is-active {
  border-color: transparent;
  background: var(--shopapp-nav-button-active);
  color: var(--shopapp-nav-button-active-text) !important;
  box-shadow: 0 10px 22px rgba(10,20,16,0.12);
}

.shopapp-nav-button--mobile.is-active:hover {
  background: var(--shopapp-nav-button-active);
}

.shopapp-nav-button--mobile.is-disabled {
  background: color-mix(in srgb, var(--shopapp-surface) 92%, #fff 8%);
  border-color: color-mix(in srgb, var(--shopapp-border) 82%, #fff 18%);
  color: var(--shopapp-muted) !important;
  cursor: default;
  box-shadow: none;
}

.shopapp-nav-button--mobile.is-disabled:hover {
  background: color-mix(in srgb, var(--shopapp-surface) 92%, #fff 8%);
}

@media (min-width: 1024px) {
  .shopapp-button,
  .shopapp-button-secondary,
  .shopapp-button-danger,
  .shopapp-stepper-button,
  .shopapp-nav-button {
    min-height: 3rem;
  }

  .shopapp-button--prominent {
    padding: 1rem 1.25rem !important;
    min-height: 3.5rem;
  }
}

.shopapp-chip-active {
  background: var(--shopapp-primary);
  color: var(--shopapp-button-text);
  border-color: var(--shopapp-primary);
}