.segmented button,.category-option{
  position:relative;
  padding-right:44px;
  background:var(--cream-light);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease,filter .12s ease,opacity .12s ease;
}

.segmented button:not(.active),.category-option:not(.active){
  filter:saturate(.5);
  opacity:.68;
  box-shadow:2px 2px 0 var(--navy);
}

.segmented button:not(.active):hover,.category-option:not(.active):hover{
  opacity:1;
  filter:none;
  background:#fff2cd;
}

.segmented button.active,.category-option.active{
  border-width:4px;
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--navy);
  color:var(--cream-light);
}

.segmented button.active{
  background:var(--red);
}

.category-option.active:nth-child(3n+1){background:var(--navy)}
.category-option.active:nth-child(3n+2){background:var(--red)}
.category-option.active:nth-child(3n){background:var(--orange)}

.segmented button.active:after,.category-option.active:after{
  content:"✓";
  position:absolute;
  top:50%;
  right:12px;
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border:2px solid var(--cream-light);
  border-radius:50%;
  background:var(--navy);
  color:var(--cream-light);
  font-family:"Arial Black",Impact,sans-serif;
  font-size:13px;
  line-height:1;
  transform:translateY(-50%);
}

.selection-help{
  margin:8px 0 2px;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  .segmented button,.category-option{transition:none}
}