/* ── Reset ───────────────────────────────────────────── */
.vhf,
.vhf *,
.vhf *::before,
.vhf *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Wrapper ──────────────────────────────────────────── */
.vhf {
    font-size: inherit;
    line-height: 1.5;
}

/* ── 母分類 Toggle ────────────────────────────────────── */
.vhf-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    font-weight: 600;
    user-select: none;
    transition: opacity .15s;
}
.vhf-toggle:hover         { opacity: .75; }
.vhf-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

.vhf-toggle-label { flex: 1; }

/* ── 箭頭 ─────────────────────────────────────────────── */
.vhf-arrow {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
}
.vhf-group.is-open > .vhf-toggle .vhf-arrow {
    transform: rotate(-135deg) translateY(-2px);
}

/* ── 子分類清單 ───────────────────────────────────────── */
.vhf-children {
    list-style: none;
    padding-left: 16px;
    overflow: hidden;
    margin-bottom: 4px;
}
/* hidden attribute → 隱藏（JS 動畫期間會移除 hidden、改用 inline display:none） */
.vhf-children[hidden] {
    display: none !important;
}

/* ── 子分類 item ──────────────────────────────────────── */
.vhf-child {
    padding: 8px 0;
    cursor: pointer;
    color: #555;
    transition: color .15s, opacity .15s;
    line-height: 1.4;
    user-select: none;
}
.vhf-child:hover          { opacity: .75; }
.vhf-child.is-active      { font-weight: 600; color: #000; }
.vhf-child:focus-visible  { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }