.detailed-menu {
    --menu-bg-color: transparent;
    --menu-text-color: inherit;
    --menu-border-color: transparent;

    
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: stretch;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid;
    border-radius: .75rem;
    
    background-color: var(--menu-bg-color) !important;
    color: var(--menu-text-color) !important;
    border-color: var(--menu-border-color) !important;
}

.detailed-menu:hover {
    --menu-bg-color: var(--cbm-color-primary-foreground);
    --menu-bg-border: var(--cbm-color-primary);
}

.detailed-menu svg { 
    width: 1.25rem;
    fill: currentColor;
    aspect-ratio: 1 / 1;
    margin-top 0.325rem;
    color: var(--cbm-color-primary);
}

.detailed-menu > .content { 
    flex-grow: 1; 
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.detailed-menu > .content > * {  margin: 0; }

.detailed-menu .menu-title {
    font-weight: 600;
    font-size: 1rem !important;
}

.detailed-menu .menu-desc {
    font-weight: 400;
    font-size: 0.925rem !important;
    opacity: 0.75; 
    line-height: 1.5;
}