:root {
  color-scheme: light;
  --grengo-green: #064c35;
  --grengo-focus: #15936a;
  --grengo-lime: #b8f229;
  --grengo-border: #dce5e0;
  --grengo-muted: #68756f;
  --grengo-shadow: 0 12px 34px rgba(6, 76, 53, .11);
}

html {
  min-height: 100%;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(21, 147, 106, .34);
  outline-offset: 2px;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

input,
select,
textarea {
  min-height: 44px;
  border-color: var(--grengo-border);
}

input::placeholder,
textarea::placeholder {
  color: #7b8580;
  opacity: 1;
}

.app {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.nav {
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -7px 24px rgba(22, 46, 36, .06);
}

.nav button {
  min-width: 52px;
  min-height: 52px;
}

.panel,
.orders,
.metric,
.account-card,
.role-hub-tile {
  border-color: var(--grengo-border);
}

.panel,
.orders,
.account-card {
  box-shadow: var(--grengo-shadow);
}

.cats,
.shops,
.products {
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.cats::-webkit-scrollbar,
.shops::-webkit-scrollbar,
.products::-webkit-scrollbar {
  display: none;
}

.cat,
.shop,
.product {
  scroll-snap-align: start;
}

.version {
  color: var(--grengo-muted);
  font-size: 12px;
  letter-spacing: .02em;
  text-align: center;
}

@media (hover: hover) {
  button:not(:disabled) {
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }

  button:not(:disabled):hover {
    filter: brightness(.98);
  }
}

button:not(:disabled):active {
  transform: scale(.98);
}

@media (max-width: 600px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .switch {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .panel {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}