/* Heirson select: a branded dropdown that replaces the browser's default one.
   The native <select> stays in the page (hidden) and remains the source of truth. */
.hss { --hs-ink: #10231A; --hs-ink3: #1B3328; --hs-ink4: #2E4A3D; --hs-lime: #C9F24B; --hs-line: #D4D8D0; --hs-muted: #56605A;
  position: relative; display: inline-block; vertical-align: middle; min-width: 210px; max-width: 100%; font: 600 15px/1.2 "Instrument Sans", system-ui, sans-serif; }
.hss.block { display: block; width: 100%; min-width: 0; }
.hss > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hss-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 46px; padding: 11px 14px 11px 16px;
  background: #fff; color: var(--hs-ink); border: 1.5px solid var(--hs-ink); border-radius: 12px; font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .2s, transform .2s; }
.hss-btn:hover { box-shadow: 4px 4px 0 var(--hs-lime); transform: translate(-1px, -1px); }
.hss-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201,242,75,.85); }
.hss-btn .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hss-btn .hss-chev { flex: none; width: 22px; height: 22px; display: grid; place-items: center; background: var(--hs-ink); transition: transform .2s; }
.hss-btn .hss-chev::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--hs-lime); border-bottom: 2px solid var(--hs-lime); transform: translateY(-2px) rotate(45deg); }
.hss.open .hss-btn .hss-chev { transform: rotate(180deg); }
.hss-list { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 100%; max-width: min(340px, calc(100vw - 32px)); max-height: min(480px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid var(--hs-ink); border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(16,35,26,.5); }
.hss:not(.open) .hss-list { display: none; }
@starting-style { .hss.open .hss-list { opacity: 0; transform: translateY(-6px); } }
.hss.open .hss-list { transition: opacity .16s, transform .2s; }
.hss.right .hss-list { left: auto; right: 0; }
.hss-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--hs-ink); cursor: pointer; white-space: nowrap; }
.hss-list li::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--hs-line); }
.hss-list li.act { background: #EEF9CF; }
.hss-list li[aria-selected="true"] { font-weight: 700; }
.hss-list li[aria-selected="true"]::before { background: #12A150; border-color: #12A150; }
/* dark sections */
.hss.dark .hss-btn { background: var(--hs-ink3); color: #fff; border-color: var(--hs-ink4); }
.hss.dark .hss-btn .hss-chev { background: var(--hs-lime); }
.hss.dark .hss-btn .hss-chev::before { border-color: var(--hs-ink); }
.hss.dark .hss-btn:hover { box-shadow: 4px 4px 0 var(--hs-lime); }
.hss.dark .hss-list { background: var(--hs-ink3); border-color: var(--hs-ink4); }
.hss.dark .hss-list li { color: #E6ECE8; }
.hss.dark .hss-list li::before { border-color: #4E6B5D; }
.hss.dark .hss-list li.act { background: var(--hs-ink4); }
.hss.dark .hss-list li[aria-selected="true"]::before { background: var(--hs-lime); border-color: var(--hs-lime); }
@media (max-width: 620px) { .hss { min-width: 0; width: 100%; display: block; } }
@media (prefers-reduced-motion: reduce) { .hss-btn, .hss-btn .hss-chev, .hss.open .hss-list { transition: none; } }