[TCS] WooCommerce Breadcrumb Custom Arrow Nav Test #1

.woocommerce-breadcrumb {
    margin: 0 0 1em;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
     list-style: none;
    overflow: hidden;
    /* font: 18px Helvetica, Arial, Sans-Serif; */
    margin: 40px;
    padding: 0;
}

/* .woocommerce-breadcrumb::after {
    clear: both;
    color: white;
    text-decoration: none;
    padding: 10px 0 10px 55px;
    background: #0c71c3; /* fallback color */
    background: hsla(34,85%,35%,1);
    position: relative;
    display: block;
    float: left;
} */


woocommerce-breadcrumb a { /* ### REQUIRED for Correct Text Color! ### */
    color: #ffffff;
}

.woocommerce .woocommerce-breadcrumb a {
    /* ## DEFAULT ## font: 14px Helvetica, Arial, Sans-Serif; */
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff; /* ### REQUIRED for Correct Text Color! ### */
}

/* ### Fancy Bradcrumb Nav w/ Arrows ### */

.woocommerce-breadcrumb li {
  float: left;
  /* ## TEST: Fix for Last item in breadcrumb trail (no <a> tag!) ## */
  color: white;
  text-decoration: none;
  /* ### DO NOT ENABLE! ### padding: 10px 0 10px 55px; */
  background: #0c71c3; /* fallback color */
  /* background: hsla(34,85%,35%,1); */
  position: relative;
  display: block;
  float: left;
}

/* ## Last Breadcrumb Item Fix #2 */
.woocommerce-breadcrumb li:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

.woocommerce-breadcrumb a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #0c71c3;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.woocommerce-breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 10px 0 10px 55px;
  background: #0c71c3; /* fallback color */
  /* background: hsla(34,85%,35%,1); */
  position: relative;
  display: block;
  float: left;
}
.woocommerce-breadcrumb li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #0c71c3;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}
.woocommerce-breadcrumb li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}
.woocommerce-breadcrumb li:first-child a {
  padding-left: 10px;
}
.woocommerce-breadcrumb li:nth-child(2) a       { background:        hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(2) a:after { border-left-color: hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(3) a       { background:        hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(3) a:after { border-left-color: hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(4) a       { background:        hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(4) a:after { border-left-color: hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(5) a       { background:        hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(5) a:after { border-left-color: hsl(207, 88%, 41%); }
/* ### The next two lines were added as a test ### */
.woocommerce-breadcrumb li:nth-child(6) a       { background:        hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:nth-child(6) a:after { border-left-color: hsl(207, 88%, 41%); }
.woocommerce-breadcrumb li:last-child a {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}

.woocommerce-breadcrumb li:last-child a:after {
  border: 0;
}

.woocommerce-breadcrumb li:last-child span {
  border: 0;
  display: none;
}


/* ## These next two lines control the hover color...currently set to RED. ## */
.woocommerce-breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.woocommerce-breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }