.char1 {
  transform: rotate(18deg);
}

.char2 {
  transform: rotate(36deg);
}

.char3 {
  transform: rotate(54deg);
}

.char4 {
  transform: rotate(72deg);
}

.char5 {
  transform: rotate(90deg);
}

.char6 {
  transform: rotate(108deg);
}

.char7 {
  transform: rotate(126deg);
}

.char8 {
  transform: rotate(144deg);
}

.char9 {
  transform: rotate(162deg);
}

.char10 {
  transform: rotate(180deg);
}

.wp-block-custom-navigator .products {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .wp-block-custom-navigator {
    display: grid;
    grid-template: "products groups levels" "products . ." auto/32% 33% 32%;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  .wp-block-custom-navigator .products {
    order: 1;
    width: 100%;
  }
  .wp-block-custom-navigator .groups {
    order: 2;
  }
  .wp-block-custom-navigator .levels {
    order: 3;
  }
  .wp-block-custom-navigator .group-placeholder {
    order: 4;
  }
  .wp-block-custom-navigator .level-placeholder {
    order: 5;
  }
  .wp-block-custom-navigator .product-placeholder {
    order: 6;
  }
  .wp-block-custom-navigator .product-group-placeholder {
    order: 7;
  }
  .wp-block-custom-navigator .product-group-level-placeholder {
    order: 8;
  }
}
@media (max-width: 1023px) {
  .wp-block-custom-navigator > div {
    margin-bottom: 2rem;
  }
  .wp-block-custom-navigator .placeholder-box {
    display: none;
  }
}

.product-holder {
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.products {
  grid-area: products;
  max-width: 410px;
}
@media (min-width: 1023px) {
  .products {
    margin: 0 auto;
  }
}

.product-items {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  box-sizing: border-box;
  padding: 44px;
  top: 0;
}
.product-items .product-item {
  height: calc(50% - 3px);
  width: calc(50% - 3px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.product-items .product-item:after, .product-items .product-item:before {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.product-items .product-item:before {
  background: #fff;
  z-index: 2;
}
.product-items .product-item:after {
  background: #E5E5E5;
  z-index: 1;
  top: 0;
  left: 0;
}
.product-items .product-item .name {
  order: 1;
}
.product-items .product-item img {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  order: 2;
}
.product-items .product-item .desc {
  display: none;
  order: 3;
}
.product-items .product-item .name {
  position: relative;
  z-index: 3;
  font-weight: 700;
}
.product-items .product-item .name span {
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  letter-spacing: 1px;
}
.product-items .product-item img {
  z-index: 3;
}
.product-items .product-item.active, .product-items .product-item:hover {
  color: #fff;
}
.product-items .product-item.active:before, .product-items .product-item:hover:before {
  background: red;
}
.product-items .product-item.active:after, .product-items .product-item:hover:after {
  background: #000;
}
.product-items .product-item.active img, .product-items .product-item:hover img {
  filter: brightness(0) invert(1);
}
.product-items .product-item:nth-child(1), .product-items .product-item:nth-child(2), .product-items .product-item:nth-child(3), .product-items .product-item:nth-child(4) {
  z-index: 2;
  position: relative;
}
.product-items .product-item:nth-child(1) img, .product-items .product-item:nth-child(2) img, .product-items .product-item:nth-child(3) img, .product-items .product-item:nth-child(4) img {
  position: absolute;
}
.product-items .product-item:nth-child(1) img, .product-items .product-item:nth-child(2) img {
  bottom: 15px;
}
.product-items .product-item:nth-child(3) img, .product-items .product-item:nth-child(4) img {
  top: 15px;
}
.product-items .product-item:nth-child(1) {
  z-index: 2;
  position: relative;
  border-radius: 100% 0 0 0;
}
.product-items .product-item:nth-child(1)::before {
  -webkit-mask-image: url("image/pie-1.png");
}
.product-items .product-item:nth-child(1)::after {
  -webkit-mask-image: url("image/pie-1-shadow.png");
}
.product-items .product-item:nth-child(1) .name {
  transform: rotate(-45deg) translate(0px, -14px);
}
.product-items .product-item:nth-child(1) img {
  right: 15px;
}
.product-items .product-item:nth-child(2) {
  border-radius: 0 100% 0 0;
}
.product-items .product-item:nth-child(2):before {
  -webkit-mask-image: url("image/pie-2.png");
}
.product-items .product-item:nth-child(2)::after {
  -webkit-mask-image: url("image/pie-2-shadow.png");
}
.product-items .product-item:nth-child(2) .name {
  transform: rotate(45deg) translate(0px, -14px);
}
.product-items .product-item:nth-child(2) img {
  left: 15px;
}
.product-items .product-item:nth-child(3) {
  border-radius: 0 0 0 100%;
}
.product-items .product-item:nth-child(3):before {
  -webkit-mask-image: url("image/pie-3.png");
}
.product-items .product-item:nth-child(3)::after {
  -webkit-mask-image: url("image/pie-3-shadow.png");
}
.product-items .product-item:nth-child(3) .name {
  transform: rotate(45deg) translate(0px, 14px);
}
.product-items .product-item:nth-child(3) img {
  right: 15px;
}
.product-items .product-item:nth-child(4) {
  border-radius: 0 0 100% 0;
}
.product-items .product-item:nth-child(4):before {
  -webkit-mask-image: url("image/pie-4.png");
}
.product-items .product-item:nth-child(4)::after {
  -webkit-mask-image: url("image/pie-4-shadow.png");
}
.product-items .product-item:nth-child(4) .name {
  transform: rotate(315deg) translate(0px, 14px);
}
.product-items .product-item:nth-child(4) img {
  left: 15px;
}
.product-items .product-item:nth-child(4) ~ .product-item img {
  display: none !important;
}
.product-items .product-item:nth-child(5) {
  position: absolute;
  top: 8%;
  left: 0;
  width: 28.3%;
  height: 41.3%;
}
.product-items .product-item:nth-child(5):before {
  -webkit-mask-image: url("image/pie-5.png");
}
.product-items .product-item:nth-child(5):after {
  -webkit-mask-image: url("image/pie-5-shadow.png");
}
.product-items .product-item:nth-child(5) .name {
  transform: rotate(-59deg) translate(0px, -15px);
}
.product-items .product-item:nth-child(6) {
  position: absolute;
  top: 0;
  left: 50%;
  width: 48%;
  height: 16%;
  justify-content: start;
  transform: translateX(-50%);
}
.product-items .product-item:nth-child(6):before {
  -webkit-mask-image: url("image/pie-6.png");
}
.product-items .product-item:nth-child(6):after {
  -webkit-mask-image: url("image/pie-6-shadow.png");
}
.product-items .product-item:nth-child(6) .name {
  padding-top: 4px;
}
.product-items .product-item:nth-child(7) {
  position: absolute;
  top: 8%;
  left: auto;
  right: 0;
  width: 28.3%;
  height: 41.3%;
}
.product-items .product-item:nth-child(7):before {
  -webkit-mask-image: url("image/pie-7.png");
}
.product-items .product-item:nth-child(7):after {
  -webkit-mask-image: url("image/pie-7-shadow.png");
}
.product-items .product-item:nth-child(7) .name {
  transform: rotate(59deg) translate(0px, -15px);
}
.product-items .product-item:nth-child(8) {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: calc(100% + 2px);
  height: 50%;
  z-index: 1;
  justify-content: end;
}
.product-items .product-item:nth-child(8):before {
  -webkit-mask-image: url("image/pie-8.png");
}
.product-items .product-item:nth-child(8):after {
  -webkit-mask-image: url("image/pie-8-shadow.png");
}
.product-items .product-item:nth-child(8) .name {
  padding-bottom: 10px;
}
.product-items .product-item:nth-child(8) ~ .product-item {
  display: none;
}

.levels {
  grid-area: levels;
}
.levels .level-holder {
  position: relative;
}
.levels .level-items {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  position: relative;
}
.levels .level-items::before {
  border-radius: 10px;
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  height: 38px;
  border: 2px solid #E5E5E5;
  border-width: 2px 7px 7px 2px;
  content: "";
}
.levels .level-items .desc {
  display: none;
}
.levels .level-item {
  position: relative;
  padding-top: 40px;
  cursor: pointer;
}
.levels .level-item::before {
  border-radius: 10px;
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border: 2px solid #E5E5E5;
  content: "";
  background: #fff;
}
.levels .level-item:first-child::before {
  left: 0;
  transform: none;
}
.levels .level-item:last-child:before {
  right: 0;
  left: auto;
  transform: none;
}
.levels .level-item.active:before, .levels .level-item:hover:before {
  background: #FF0000;
  border-color: #000;
}
.levels.has-active .level-item, .levels.hover .level-item {
  color: #808080;
}
.levels.has-active .level-item.active, .levels.has-active .level-item:hover, .levels.hover .level-item.active, .levels.hover .level-item:hover {
  color: #000;
}

.groups {
  grid-area: groups;
}
.groups .group-holder {
  position: relative;
}
.groups .group-items {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  position: relative;
}
.groups .group-items::before {
  border-radius: 10px;
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  height: 38px;
  border: 2px solid #E5E5E5;
  border-width: 2px 7px 7px 2px;
  content: "";
}
.groups .group-item {
  position: relative;
  padding-top: 40px;
  cursor: pointer;
}
.groups .group-item::before {
  border-radius: 10px;
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border: 2px solid #E5E5E5;
  content: "";
  background: #fff;
}
.groups .group-item:first-child::before {
  left: 0;
  transform: none;
}
.groups .group-item:last-child:before {
  right: 0;
  left: auto;
  transform: none;
}
.groups .group-item.active:before, .groups .group-item:hover:before {
  background: #FF0000;
  border-color: #000;
}
.groups .group-item .desc {
  display: none;
}
.groups.has-active .group-item, .groups.hover .group-item {
  color: #808080;
}
.groups.has-active .group-item.active, .groups.has-active .group-item:hover, .groups.hover .group-item.active, .groups.hover .group-item:hover {
  color: #000;
}

.placeholder-box {
  flex-direction: column;
}
.placeholder-box > div:not(.placeholder) {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: start;
}
.placeholder-box > div:not(.placeholder) a {
  color: red;
}
.placeholder-box > div:not(.placeholder) a:last-child {
  display: inline-block;
  margin-top: auto;
}
.placeholder-box > div:not(.placeholder) a:last-child::after {
  width: 100%;
  content: "";
  height: 1px;
  background: currentColor;
  display: block;
  transition: width 0.2s ease;
}
.placeholder-box > div:not(.placeholder) a:last-child:hover::after {
  width: 0;
}
.placeholder-box.product-group-level-placeholder > div:not(.placeholder) {
  display: none;
  color: #000;
}
.placeholder-box.product-group-placeholder > div:not(.placeholder) {
  display: none;
  color: #000;
}

.tooltip-holder {
  padding: 1rem;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  display: flex;
  flex-direction: column;
  position: absolute;
  background: #fff;
  max-width: 90%;
  width: 100%;
  display: none;
  z-index: 2;
}
.level-holder .tooltip-holder, .group-holder .tooltip-holder {
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .level-holder .tooltip-holder, .group-holder .tooltip-holder {
    top: calc(100% + 20px);
  }
  .level-holder .tooltip-holder:after, .level-holder .tooltip-holder:before, .group-holder .tooltip-holder:after, .group-holder .tooltip-holder:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .level-holder .tooltip-holder:after, .group-holder .tooltip-holder:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
  }
  .level-holder .tooltip-holder:before, .group-holder .tooltip-holder:before {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000;
    border-width: 11px;
    margin-left: -11px;
  }
}
@media (max-width: 1024px) {
  .level-holder .tooltip-holder, .group-holder .tooltip-holder {
    bottom: calc(100% + 20px);
  }
  .level-holder .tooltip-holder:after, .level-holder .tooltip-holder:before, .group-holder .tooltip-holder:after, .group-holder .tooltip-holder:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .level-holder .tooltip-holder:after, .group-holder .tooltip-holder:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 10px;
    margin-left: -10px;
  }
  .level-holder .tooltip-holder:before, .group-holder .tooltip-holder:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000;
    border-width: 11px;
    margin-left: -11px;
  }
}
@media (min-width: 1024px) {
  .product-holder .tooltip-holder {
    left: calc(100% + 22px);
    top: 10%;
  }
  .product-holder .tooltip-holder:after, .product-holder .tooltip-holder:before {
    right: 100%;
    top: 25%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .product-holder .tooltip-holder:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 10px;
    margin-top: -10px;
  }
  .product-holder .tooltip-holder:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 11px;
    margin-top: -11px;
  }
}
@media (max-width: 1023px) {
  .product-holder .tooltip-holder {
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 20px);
  }
  .product-holder .tooltip-holder:after, .product-holder .tooltip-holder:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .product-holder .tooltip-holder:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
  }
  .product-holder .tooltip-holder:before {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #000;
    border-width: 11px;
    margin-left: -11px;
  }
}
.tooltip-holder .t-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 1rem;
}
.tooltip-holder .t-button {
  padding: 0;
  border: none;
  color: red;
  background: none;
  align-self: end;
  line-height: 1.2;
  margin-top: 2rem;
}
.tooltip-holder .t-button::after {
  display: block;
  height: 1px;
  width: 100%;
  content: "";
  background: currentColor;
  transition: width 0.2s ease;
}
.tooltip-holder .t-button:hover::after {
  width: 0;
}

.active-tooltip-1 .product-holder .tooltip-holder {
  display: flex;
}
.active-tooltip-1 .placeholder-box,
.active-tooltip-1 > div:not(.products) {
  opacity: 0.4;
  pointer-events: none;
}

.active-tooltip-2 .group-holder .tooltip-holder {
  display: flex;
}
.active-tooltip-2 .placeholder-box,
.active-tooltip-2 > div:not(.groups) {
  opacity: 0.4;
  pointer-events: none;
}

.active-tooltip-3 .level-holder .tooltip-holder {
  display: flex;
}
.active-tooltip-3 .placeholder-box,
.active-tooltip-3 > div:not(.levels) {
  opacity: 0.4;
  pointer-events: none;
}

.group-title,
.level-title {
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.view-button {
  width: 100%;
  border-radius: 10px;
  padding: 0.5rem 1rem;
}
.view-button[disabled] {
  background: #E5E5E5;
  border-color: #E5E5E5;
  color: #fff;
}
@media (min-width: 1024px) {
  .view-button {
    display: none;
  }
}