.nohe-hp {
  --nohe-hp-font-family: inherit;
  --nohe-hp-label-size: 14px;
  --nohe-hp-option-size: 16px;
  --nohe-hp-mobile-label-size: 13px;
  --nohe-hp-mobile-option-size: 14px;
  --nohe-hp-group-gap: 18px;
  --nohe-hp-option-gap: 8px;
  --nohe-hp-mobile-group-gap: 12px;
  --nohe-hp-mobile-option-gap: 6px;
  --nohe-hp-pad-x: 16px;
  --nohe-hp-pad-y: 9px;
  --nohe-hp-mobile-pad-x: 12px;
  --nohe-hp-mobile-pad-y: 8px;
  --nohe-hp-radius: 6px;
  --nohe-hp-border-width: 1px;
  --nohe-hp-text-color: #333333;
  --nohe-hp-label-color: #5e5e5e;
  --nohe-hp-border-color: #d9dadd;
  --nohe-hp-background: #ffffff;
  --nohe-hp-active-text: #333333;
  --nohe-hp-active-border: #5e5e5e;
  --nohe-hp-active-background: #efefef;
  display: flex;
  flex-direction: column;
  gap: var(--nohe-hp-group-gap);
  min-width: 0;
  font-family: var(--nohe-hp-font-family);
}
.nohe-hp *, .nohe-hp *::before, .nohe-hp *::after { box-sizing: border-box; }
.nohe-hp-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; width: 100%; }
.nohe-hp-label { color: var(--nohe-hp-label-color); font-size: var(--nohe-hp-label-size); line-height: 1.3; }
.nohe-hp-options { display: flex; flex-wrap: wrap; align-self: stretch; gap: var(--nohe-hp-option-gap); min-width: 0; }
.nohe-hp-option,
.nohe-hp-option:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--nohe-hp-pad-y) var(--nohe-hp-pad-x);
  border: var(--nohe-hp-border-width) solid var(--nohe-hp-border-color);
  border-radius: var(--nohe-hp-radius);
  background: var(--nohe-hp-background);
  color: var(--nohe-hp-text-color);
  font-size: var(--nohe-hp-option-size);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.nohe-hp-option:hover,
.nohe-hp-option:focus-visible { border-color: var(--nohe-hp-active-border); color: var(--nohe-hp-text-color); }
.nohe-hp-option:focus-visible { outline: 2px solid var(--nohe-hp-active-border); outline-offset: 2px; }
.nohe-hp-option.is-active,
.nohe-hp-option.is-active:visited {
  background: var(--nohe-hp-active-background);
  border-color: var(--nohe-hp-active-border);
  color: var(--nohe-hp-active-text);
}
@media (max-width: 767px) {
  .nohe-hp { gap: var(--nohe-hp-mobile-group-gap); }
  .nohe-hp-options { gap: var(--nohe-hp-mobile-option-gap); }
  .nohe-hp-label { font-size: var(--nohe-hp-mobile-label-size); }
  .nohe-hp-option { padding: var(--nohe-hp-mobile-pad-y) var(--nohe-hp-mobile-pad-x); font-size: var(--nohe-hp-mobile-option-size); }
}