:root {
  --ember: #B14A2B;
  --ember-dark: #9C4025;
  --oak: #3B2A1F;
  --parchment: #F6EBD7;
  --ink: #1F1B16;
  --brass: #C8A24A;
  --sage: #3E6B4E;
  --panel: #FBF3E4;
  --border: #D6C6A8;
}

/* Base */
body {
  background-color: var(--parchment);
  color: var(--ink);
}

/* TOP utility bar */
#top {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}
#top a {
  color: var(--ink);
}
#top a:hover {
  color: var(--ember);
}

/* HEADER band (logo / search / cart) */
header {
  background-color: var(--oak);
}
header #logo a,
header #logo h1 a {
  color: var(--parchment) !important;
}
header .form-control {
  border-color: var(--border);
}
header #cart .btn,
header #cart button {
  background: var(--ember) !important;
  border-color: var(--ember) !important;
  color: #fff !important;
}
header #cart .btn:hover,
header #cart button:hover {
  background: var(--ember-dark) !important;
  border-color: var(--ember-dark) !important;
}

/* MAIN category menu bar */
#menu {
  background-color: var(--ember) !important;
  border: 0 !important;
}
#menu .nav > li > a,
#menu .navbar-nav > li > a {
  color: #fff !important;
}
#menu .nav > li > a:hover,
#menu .navbar-nav > li > a:hover {
  background: rgba(0,0,0,0.12) !important;
  color: #fff !important;
}

/* Dropdown menus (readable again) */
#menu .dropdown-menu {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}
#menu .dropdown-menu a {
  color: var(--ink) !important;
}
#menu .dropdown-menu a:hover {
  background: rgba(177,74,43,0.12) !important;
  color: var(--ink) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--ember);
  border-color: var(--ember);
}
.btn-primary:hover {
  background-color: var(--ember-dark);
}

/* Product cards */
.product-thumb,
.card {
  background-color: var(--panel);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Links */
a {
  color: var(--ember);
}
a:hover {
  color: var(--brass);
}

/* Footer */
footer {
  background-color: var(--oak);
  color: #EDE1C8;
}
footer a {
  color: var(--brass);
}
/* Force the main nav bar to Ember (override default blue gradient) */
#menu .navbar,
#menu .navbar-expand-lg,
#menu .navbar-nav,
#menu .nav,
#menu {
  background: var(--ember) !important;
  background-image: none !important;
  border: 0 !important;
}

/* Menu links stay white */
#menu .navbar-nav > li > a,
#menu .nav > li > a {
  color: #fff !important;
}