.hcdw-dropdown {
    --hcdw-bg: #ffffff;
    --hcdw-heading-text: #ffffff;
    --hcdw-text: #111827;
    --hcdw-muted: #6b7280;
    --hcdw-primary: #7c3aed;
    --hcdw-primary-2: #06b6d4;
    --hcdw-link-bg: #ffffff;
    --hcdw-hover-text: #ffffff;
    --hcdw-hover-bg: #7c3aed;
    --hcdw-hover-bg-2: #06b6d4;
    --hcdw-count-text: #6b7280;
    --hcdw-count-bg: #f3f4f6;
    --hcdw-border: rgba(17, 24, 39, 0.16);
    width: 100%;
    max-width: 460px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.hcdw-dropdown--inline {
    padding: 14px;
    border: 1px solid var(--hcdw-border);
    border-radius: 0;
    background: var(--hcdw-bg);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hcdw-dropdown__heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    color: var(--hcdw-heading-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: 0;
    background: linear-gradient(135deg, var(--hcdw-primary), var(--hcdw-primary-2));
    box-shadow: none;
}

.hcdw-dropdown--no-gradient .hcdw-dropdown__heading {
    background: var(--hcdw-primary);
}

.hcdw-dropdown__heading::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: currentColor;
    opacity: 0.9;
    box-shadow: none;
}

.hcdw-dropdown__panel {
    position: relative;
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hcdw-tree,
.hcdw-tree ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hcdw-tree--depth-0 {
    display: grid;
    gap: 5px;
}

.hcdw-tree--depth-1,
.hcdw-tree--depth-2,
.hcdw-tree--depth-3,
.hcdw-tree--depth-4,
.hcdw-tree--depth-5,
.hcdw-tree--depth-6 {
    display: grid;
    gap: 3px;
    max-height: 0;
    overflow: hidden;
    margin-left: 8px;
    padding-left: 6px;
    border-left: 1px solid color-mix(in srgb, var(--hcdw-primary-2) 34%, transparent);
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease, margin-top 200ms ease;
}

.hcdw-tree--depth-1 {
    margin-left: 7px;
    padding-left: 6px;
    border-left: 2px solid color-mix(in srgb, var(--hcdw-primary) 18%, transparent);
}

.hcdw-tree__item.is-expanded > .hcdw-tree--depth-1,
.hcdw-tree__item.is-expanded > .hcdw-tree--depth-2,
.hcdw-tree__item.is-expanded > .hcdw-tree--depth-3,
.hcdw-tree__item.is-expanded > .hcdw-tree--depth-4,
.hcdw-tree__item.is-expanded > .hcdw-tree--depth-5,
.hcdw-tree__item.is-expanded > .hcdw-tree--depth-6 {
    max-height: 900px;
    margin-top: 3px;
    opacity: 1;
    transform: translateY(0);
}

.hcdw-tree__item {
    position: relative;
}

.hcdw-blog-overview {
    display: flex;
    align-items: stretch;
    gap: 5px;
    margin: 0 0 8px;
}

.hcdw-blog-overview .hcdw-tree__link {
    font-weight: 400;
    border-color: color-mix(in srgb, var(--hcdw-primary) 18%, transparent);
    background: color-mix(in srgb, var(--hcdw-primary) 6%, var(--hcdw-link-bg));
}

.hcdw-blog-overview.is-current-category .hcdw-tree__link {
    color: var(--hcdw-hover-text);
    border-color: transparent;
    background: linear-gradient(135deg, var(--hcdw-hover-bg), var(--hcdw-hover-bg-2));
    font-weight: 400;
}

.hcdw-dropdown--no-gradient .hcdw-blog-overview.is-current-category .hcdw-tree__link {
    background: var(--hcdw-hover-bg);
}

.hcdw-tree__row {
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.hcdw-tree__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    color: var(--hcdw-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--hcdw-link-bg);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    box-shadow: none;
}

.hcdw-tree--depth-0 > .hcdw-tree__item > .hcdw-tree__row > .hcdw-tree__link {
    font-weight: 400;
    border-color: color-mix(in srgb, var(--hcdw-primary) 18%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--hcdw-primary) 10%, var(--hcdw-link-bg)), color-mix(in srgb, var(--hcdw-primary-2) 10%, var(--hcdw-link-bg)));
}

.hcdw-dropdown--no-gradient .hcdw-tree--depth-0 > .hcdw-tree__item > .hcdw-tree__row > .hcdw-tree__link {
    background: var(--hcdw-link-bg);
}

.hcdw-tree--depth-1 > .hcdw-tree__item > .hcdw-tree__row > .hcdw-tree__link {
    min-height: 30px;
    padding-left: 8px;
    font-size: 13px;
    background: var(--hcdw-link-bg);
}

.hcdw-tree__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-self: center;
    color: var(--hcdw-heading-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 0;
    background: linear-gradient(135deg, var(--hcdw-primary), var(--hcdw-primary-2));
    box-shadow: none;
    transform: none;
}

.hcdw-dropdown--no-gradient .hcdw-tree__status-icon {
    background: var(--hcdw-primary);
}

button.hcdw-tree__status-toggle {
    cursor: pointer;
    transition: filter 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

button.hcdw-tree__status-toggle:hover,
button.hcdw-tree__status-toggle:focus {
    color: var(--hcdw-hover-text);
    background: linear-gradient(135deg, var(--hcdw-hover-bg), var(--hcdw-hover-bg-2));
    border-color: color-mix(in srgb, var(--hcdw-hover-text) 30%, transparent);
    box-shadow: none;
    transform: none;
    outline: 2px solid color-mix(in srgb, var(--hcdw-hover-bg) 35%, transparent);
    outline-offset: 2px;
}

.hcdw-tree__item.is-active-path > .hcdw-tree__row > .hcdw-tree__link {
    border-color: color-mix(in srgb, var(--hcdw-primary) 42%, transparent);
    background: color-mix(in srgb, var(--hcdw-primary) 8%, var(--hcdw-link-bg));
    font-weight: 400;
}

.hcdw-tree__item.is-active-path > .hcdw-tree__row > .hcdw-tree__status-icon {
    border-color: color-mix(in srgb, var(--hcdw-primary) 45%, transparent);
}

.hcdw-tree__item.is-current-category > .hcdw-tree__row > .hcdw-tree__link {
    color: var(--hcdw-hover-text);
    border-color: transparent;
    background: linear-gradient(135deg, var(--hcdw-hover-bg), var(--hcdw-hover-bg-2));
    font-weight: 400;
}

.hcdw-dropdown--no-gradient .hcdw-tree__item.is-current-category > .hcdw-tree__row > .hcdw-tree__link {
    background: var(--hcdw-hover-bg);
}

.hcdw-tree__item.is-current-category > .hcdw-tree__row > .hcdw-tree__link .hcdw-tree__count {
    color: var(--hcdw-hover-text);
    background: color-mix(in srgb, var(--hcdw-hover-text) 22%, transparent);
}

.hcdw-dropdown--no-gradient button.hcdw-tree__status-toggle:hover,
.hcdw-dropdown--no-gradient button.hcdw-tree__status-toggle:focus {
    background: var(--hcdw-hover-bg);
}

.hcdw-tree__item:not(.has-children) > .hcdw-tree__row .hcdw-tree__status-icon {
    color: var(--hcdw-text);
    background: color-mix(in srgb, var(--hcdw-text) 9%, var(--hcdw-link-bg));
    border-color: color-mix(in srgb, var(--hcdw-text) 14%, transparent);
    box-shadow: none;
}

.hcdw-tree__link:hover,
.hcdw-tree__link:focus {
    color: var(--hcdw-hover-text);
    background: linear-gradient(135deg, var(--hcdw-hover-bg), var(--hcdw-hover-bg-2));
    border-color: transparent;
    transform: none;
    outline: none;
}

.hcdw-dropdown--no-gradient .hcdw-tree__link:hover,
.hcdw-dropdown--no-gradient .hcdw-tree__link:focus {
    background: var(--hcdw-hover-bg);
}

.hcdw-tree__label {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.hcdw-tree__count {
    min-width: 22px;
    padding: 2px 6px;
    color: var(--hcdw-count-text);
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    border-radius: 0;
    background: var(--hcdw-count-bg);
    box-shadow: none;
}

.hcdw-tree__link:hover .hcdw-tree__count,
.hcdw-tree__link:focus .hcdw-tree__count {
    color: var(--hcdw-hover-text);
    background: color-mix(in srgb, var(--hcdw-hover-text) 22%, transparent);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
    .hcdw-tree--depth-0 > .hcdw-tree__item > .hcdw-tree__row > .hcdw-tree__link {
        background: var(--hcdw-link-bg);
    }

    .hcdw-tree__item:not(.has-children) > .hcdw-tree__row .hcdw-tree__status-icon {
        background: var(--hcdw-count-bg);
    }

    .hcdw-blog-overview .hcdw-tree__link {
        background: var(--hcdw-link-bg);
    }

    .hcdw-blog-overview.is-current-category .hcdw-tree__link {
        background: var(--hcdw-hover-bg);
    }

    .hcdw-tree__item.is-active-path > .hcdw-tree__row > .hcdw-tree__link {
        background: var(--hcdw-link-bg);
    }

    .hcdw-tree__item.is-current-category > .hcdw-tree__row > .hcdw-tree__link {
        background: var(--hcdw-hover-bg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hcdw-tree--depth-1,
    .hcdw-tree--depth-2,
    .hcdw-tree--depth-3,
    .hcdw-tree--depth-4,
    .hcdw-tree--depth-5,
    .hcdw-tree--depth-6,
    .hcdw-tree__link,
    button.hcdw-tree__status-toggle {
        transition: none;
    }
}
