:root {
  --sky: #AEE3FF;
  --sand: #F6DF8B;
  --sun: #FFD85A;
  --orange: #E8702B;
  --bg: #F7FBFF;
  --panel: #FFFFFF;
  --text: #263238;
  --muted: #6B7B86;
  --line: #E9EEF3;
  --tint-sand: #FFF4D6;
  --hover-sky: rgba(174, 227, 255, .18);
  --hover-sand: rgba(246, 223, 139, .18);
  --accent-weak: rgba(232, 112, 43, .12);
  --nav-h: 56px;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
}

#topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

#menuBtn {
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}

#menuBtn .bi {
  font-size: 1.25rem;
  line-height: 1;
}

#menuBtn:hover {
  background: var(--hover-sky);
  border-color: #d7dee4;
}

#categoryTitle,
#homeLink {
  color: #1d2b36;
  font-weight: 700;
}

.offcanvas {
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.offcanvas-header {
  background: var(--tint-sand);
  border-bottom: 1px solid var(--line);
}

.list-group-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.menu-item.root>.list-group-item {
  font-weight: 600;
  border-top: 1px solid var(--line);
}

.menu-item.root:first-child>.list-group-item {
  border-top: 0;
}

.menu-item.root>.list-group-item.list-group-item-action:hover {
  background: var(--hover-sand);
}

.submenu {
  padding-left: .5rem;
}

.submenu .btn {
  width: 100%;
  text-align: left;
  background: transparent;
  color: #3a454b;
  padding: .5rem 1rem .5rem 1.5rem;
  border-radius: 0;
}

.submenu .btn::before {
  content: "— ";
  color: var(--orange);
  margin-right: .25rem;
}

.submenu .btn:hover {
  background: var(--hover-sky);
}

.list-group-item.active {
  background: var(--orange);
  border-color: var(--orange);
}

.submenu .btn.is-active {
  background: var(--accent-weak);
  box-shadow: inset 3px 0 0 0 var(--orange);
}

.main-area {
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

#catalog {
  padding-top: .5rem;
}

.cat-card {
  border: 1px solid var(--line);
  background: var(--panel);
}

.cat-thumb {
  height: 160px;
  object-fit: cover;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 992px) {
  .cat-thumb {
    height: 200px;
  }
}

.cat-title {
  font-weight: 700;
}

.cat-sub button {
  border-color: #dcdfe4;
}

#sliderContainer {
  padding-top: .5rem;
}

.img-slide {
  max-width: 100%;
  max-height: calc(100% - 54px);
  object-fit: contain;
  background: var(--panel);
  border: 1px solid var(--line);
}

.progress {
  background: rgba(0, 0, 0, .08);
}

.progress-bar {
  background: var(--orange);
}

#categoryTitle{
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 700;
  font-size: 1.5rem;
}

#categoryTitle.title-active{
  color: var(--orange);
}

.truncate{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }